Jan 20
Vuex — State Management
Lets first understand what is state?
💡In Simple words we can say it is current data which needed to our component to render it on screen.
We can share data between the components by using events and props.
For large application these tree structure handling will get complicated, so we can go for Vuex store state management, So here we are going to create single store to maintain state i.e single source of truth.
🗃️ Vuex Store
Vuex store is global state from where each components can access data no need to consider up and down node of tree.
If any component updates the state then others components will get updated state immediately.
what happens suppose many components tries to change state ?
So here state management patterns brings Mutation and Actions terms.
⚙️ Mutations: Its name suggest us that it is responsible for to mutate the current state of object.
📋 Actions: Action shouldn't change state directly but call the mutations. It can invoke multiple mutations.
⛏️ Getters: It works as computed property for stores.
Lets take example to understand in more clarity —
In our stare property we have students of array.
Below that setStudents mutations allows us to update student array that we’ll receive from an API call in our Action below.
Then in our actions we are having multiple steps:
first we make api call then we commit setStudents mutation with current api response.
And we will get updated api response using gettters.
Hope single source of truth useful for you 😄
Do let me know if you want some other articles of this type here 📪
