What is Vuex and state management?

Blog > Vuex

First things first we need to know what Vuex means and what is it capable of

Vuex is a state management pattern or state management library. Vuex makes data management easy and more maintainable in the application. In simple words, Vuex is a data store that supplies or provide data to Vue components with much consistently, more efficiently by making code more simple. Transferring of data between the component can be done effectively using Vuex when comparing with the traditional way witch is Vue.js passing data by input parameters. Vuex pattern is similar to Redux existing library for state management.


So what is the main difference between them?

While Redux uses reducers, Vuex uses mutations. In Redux, state is always immutable, while in Vuex committing mutation by the store is the only way to change data.

Vuex vs. Redux - what to choose? 

There is no direct answer to this question. From this article, you can learn that both of the discussed state management tools are based on the same pattern with small differences between them, both are framework agnostic (which means that you can freely use Vuex with React and Redux with Vue) and both of them are very powerful. 
So far we learned what Vuex means and what state is. Now we can understand how state management works using Vuex.

Vuex has 4 main structure for state management. These are Actions, Mutations, State and Getters.To explain them one by one:

Actions: Actions are task performers which have the capabilities to do either synchronous or asynchronous operations. In Vuex actions are used to invoke the rest API's to fetch the data and then actions call mutations to change the store state. To invoke mutations actions use a command called 'commit'. This 'commit' command invokes appropriate mutation and receives the rest API data as input to save into the store state.
Mutations: Mutations are to perform mutable operations. In Vuex the only option to change the state of the store is to use mutations. So the only way to add or update the data of the Vuex store is done by mutations.
State: State is a simple javascript object literal. A Vuex store saves or holds the data in the state object.
Getters: Getters are to perform tasks to retrieve the data from the Vuex store state. Getters are helped to retrieve data and then we can bind the data to components. So using these Getters, in n-number of Vue Components can share the same data from the Vuex store

Tags