Today’s topic is What is Vuex? We know about variables and data, We have discussed custom events that trigger parents. We know a thing or two about computed properties and watchers. However, one thing we do not know is how to put all of this together. The funny thing is, all these beautiful feats of data reactivity are limited to their components. They cannot talk on an application scale. Here comes the solution called Vuex.
What is Vuex?
I’d rather let the code do the talking. You already know that we have a file called store.js. We will now do some editing to the file and you can replicate the code as below.
Editing Store.js
The above code may not make sense to you but by the time you complete this article, it completely will.
- In the first few lines, we are simply importing Vuex and telling Vue to include it in our app.
- Next, We are exporting a new instance of the Vuex store.
- This export is later added to the Vue instance from main.js.
Let us now have a look at the code we’ve written inside the Vuex store export. Let us discuss the components in detail.
- State: It is very much like the data component. All types of JavaScript supported data types can be used in the state in key-value pairs.
- Getters: They are very useful in getting the latest value of a state key. Getters are often used inside computed properties to maintain a live version of a state variable.
- Mutations: The state variables inside Vuex cannot be modified directly. You need to run these functions called mutations that mutate the Vuex state.
- Actions: Actions are very much like mutation, they are used for performing actions that involve multiple mutations. Actions are often used to avoid having to write multiple mutation commands.
Now that you know what each item in Vuex means, we can actually use this somewhere in our code. Quickly replicate the following code so we can discuss the real application of Vuex further.
The most amazing part of what we’ve written in the code above is that we do not have the data property. The reason is simple, we don’t need it here. But we do have a data member that is computed called count. Well, count returns the getter count. Also, since it is a computed property, our local count variable gets updated, every-time the state is changed.
We have added 2 buttons that run 2 previously defined mutations. The syntax is actually self-explanatory. Also, if you had to call them inside the js file, you would use this specifier.
You will be able to increment/decrement the count. The flow of events for the same is as follows.
- Data from store state called count is loaded into local computed property count.
- A button is clicked and a mutation/action is triggered.
- The value of count from vuex store state changes.
- The new value is sent back to the computed property.
- The above steps are repeated until the user gets bored.
Conclusion
Vuex is a great package that can be used for state management. It is officially maintained by the Vue team and has some really interesting features. Initially, you may not feel the need, but when you deal with applications that are more complex, you will need to use Vuex. Vuex is much more complex and this was just a basic tutorial. If you want me to write more articles on Vuex or need help with the topics from this article, do let me know in the comment section below.
