Vuex getting started!

Tram Ho

1. Introduction

According to VueX homepage, it is state management pattern + library.

And as far as I understand it is like Ngrx with Angular 2+, Redux with ReactJS. It was born to handle data as Singleton (Few changes in the app), or to transmit events or it can also be understood to manage state and share data between components.

Because the thinking is the same, any friend who has gone through Ngrx or Redux will learn VueX very quickly, as I commented, Ngrx is quite difficult to use @@, Redux is easier to understand – easier to implement.

2. Details

In this section I will introduce in general the components around this diagram.

As you can see here we have some Core concepts to keep in mind: State, Store, Getters, Actions, Mutations. In the lower part we will go over from the first one and I will introduce briefly to you guys.

Before going into the details of each part, you need to understand that when using VueX, the singleton data will be saved to the store. And once saved here, if you want to change these states, you cannot change it directly, but you must change it through an action to a certain mutations, here the new mutations can change our state.


Here you need to understand the state that stores data in each component. For Angular 2+ it is the properties of the class (component), for React it is clearly the parts in this.state (For Class component type) and useState (For function component). As for VueJS, it is part of your data.

And when we add VueX to Vue, you simply understand that it is not local in each Component anymore but it will be shared with other components and services in the system.

So have you asked: So everything is put into the State of Redux à, is there too much? The answer is not all put in there, guys. @@ you put so much in that you die ^^. Note that the only part to be attached is singleton. Here we will need to understand that singleton means little change, or no change throughout the life of the app.


Store is a state manager, it will have methods that allow you to change the state in the next time via dispatch (sounds like React too) or a commit. Store is unique within an app, it will be initialized with root.


Here you can understand it is kind of a computed to calculate data, handle a common logic that many components use. The function written here can only be used to retrieve data but cannot modify (Contact it a bit like Getter in OOP – showing closures).


Action will usually contain logic related to the business and you should understand that it does not directly change the state. If you want to change the State, you need to use a Commit defined at Mutations. The reason is because Actions are often run asynchronously (your code will still run when actions are not completed) and so when it is finished, we will go to Commit to change data.


The functions in mutations usually should not contain any logic or business, they should only have one update state. You should understand that it runs synchronously and should know that a function inside a Mutations is called a Commit.

Ok, that’s enough for saying – the parts above are Core parts. Now we will make a small example to understand more of you.

First, you will need to create a Vue app and the VueX, by running the following command: (If you do not know why there is a vue command, please search the Vue cli)

  • vue create demo-vuex
  • yarn add vuex or npm install vuex

When you’re done, we’ll do it together. First we will create a folder store and write an index.js file.

To use this file we will need to import and inject it inside the Vue root object. You adjust the main.js file as follows:

Here I am using mapState because I am using more than one state in the store, if you only use one, then change it like this.

Compare the above two ways and feel (feeling ^^), which is simpler, the answer is optional: if you do not want to write more logic then use the first method, and if you want to write more logic to show it, then you You still have to write it down and then insert the logic.

Next, we will update store / index.js together to see more actions and mutations how it works ^^.

Let’s change file store / index.js okay, here you pay attention to the actions and mutations section.

Next we are going to change our component part.

Here if you succeed, when changing usernameInput, then click the [Change username] button, our username will be updated. If there are any errors, please do not hesitate to comment.

Next we will see how to getter how it works. As I mentioned earlier, this is the part where the logic handles, in order to retrieve the state that has been calculated. You write to getter if many components reuse this function, otherwise take the state out and recalculate each component only.

We modify store / index.js to read as follows:

Next to display it outside, we will modify the component file as follows.

Here you can also use additional features of VueX to make the code shorter: mapGetters, mapActions, mapState, mapMutations. It is too convenient ^^.

3. Conclusion

So, you probably understand the most basic part of VueX already. But the pool is boundless, this is only a very small part that you can do with VueX. But I’m confident it is the most important core. If you are very basic like this then you will get acquainted with the project using VueX very quickly.

A little more, until now React is still the most popular framework, and right after it is Vue. And Angular2 + is only at the end because it is bulky – harder to use than these 2 guys.

3s of advertising. I have just been blogging since the beginning of March, so there are many things I hope you give up for it .

4. References

Vuex made simple – getting started!

What is Vuex?

Vuex Tutorial

Share the news now

Source : Viblo