Vuex
Vuex is a state management pattern + library for Vue. js applications. It acts as a centralized store, for all the components in an application, with certain rules. The rules help in updating stores in a particular known fashion.
Installation
- NPM Package
2) Yarn Package
Basic’s Terminologies of Vuex
- State
- Getters
- Mutation
- Action
State
Vuex uses a single state i.e a single JSON object that contains all of your application-level states. It also refers that you have a common global state for all of your applications.
Getters
Getters allows us to compute derived states based on store states, for example, we need to filter the particular value with store and get in the component, we can do it we getters. Vuex allows defining getters in store.
Getters is the first parameter. We can use it in any component easily with mapGetters or with simple ‘this.$store.getters.allTodos’ .
Mutation
The only way to change data in Vuex is only Mutation. We do not update any data directly in the state in Vuex. They are similar to events: each and every mutation has 2 parts type string and handler.
Here setTodos, newTodos, and removeTodos are event where first param as state.
Action
Actions are quite similar to the Mutation in Vuex. Actions are used to commit the Mutation, it contains the handlers with the first param as “commit” object used for committing changes. ex:-
There are 2 basic methods that need to be imported while using state and updating any data from any component in the Vuex store.
- mapGetters:- This is a helper provided by Vuex which returns store getters in our component. We can easily fetch in our computed hooks.
2. mapActions: This is a helper which maps component methods with store Actions.
…………………………..Thanks and Happy Coding :-)…………………………
