When should you map the entire Vuex state?
1, Basic concepts. We divide vuex into four modules: state, getter, mutation, and action. state: define variable;. getters: get variables;. mutations: synchronously perform operations on variables;. actions: perform operations on variables asynchronously;.
mapState, mapGetters, mapActions, mapMutations in vuex are auxiliary functions. After introducing vuex, we need to define variables in state, similar to data in vue, and store state through state.
For example, we define state in vuex as:. We want to use nickname, age and gender in the component. props, methods, data and computed are initialized between beforeCreated and created, so we use properties in computed.
When we do not use mapState, the store instance will be injected into all the sub components under the root component, and the sub components can be accessed through this.$store.
The code is as follows:. When a component needs to obtain multiple states, it will be redundant to declare these states as calculated properties.
To solve this problem, we can use the mapState helper function to help us generate the calculated properties. Remember: when using such auxiliary functions as mapState, the previous method name is consistent with the obtained property name.
The results are as follows:. Vuex allows us to define "getter" (which can be considered as the calculated property of the store) in the store.
Just like calculating properties, the return value of a getter is cached based on its dependencies, and is recalculated only when its dependency value changes. The vuex code is as follows:.
The HTML part is:. When mapGetters are not used, the js part is as follows:.
When mapGetters is used, the js part is as follows:. The results are as follows:. The only way to change the state in vuex's store is to commit mutation. Mutations in vuex are very similar to events: each mutation has an event type of a string and a callback function.
This callback function is where we actually make the state change, and it takes state as the first parameter. For example, we need to click the button age plus 1. The vuex code is as follows:. When mapMutations is not used, use this$ store.commit ('xxx ') submit mutation.
The HTML code is as follows:. js code is as follows:. When mapMutations is used, the methods in the component are mapped to store.commit Call. The HTML code is as follows:.
js code is as follows:. Remember: mutation must be a synchronous function. Action is similar to mutation in that:. Action submits mutation instead of changing state directly.
An Action can contain any asynchronous operation. For example, we need to operate the age. The vuex code is as follows:.
When mapActions is not used store.dispatch Method trigger. The HTML code is as follows:. js code is as follows:. When using mapActions, map the methods of the component to store.dispatch Call.
The HTML code is as follows:. js code is as follows:. If the mutation must be executed synchronously, the Action will not be constrained! We can perform asynchronous operations within an Action. As of 2022 medium.com requires you to have at least 100 followers to be eligible for the partner program.
At the time of writing this, I have 13. So please consider following me if you find this article helpful or interesting. There is an alternative approach that should probably be referred.
Especially if you are working on a new project, there might be now reason to use Vuex at all. I just stumbled upon this StackOverflow post while checking out Vue 3 and this new syntax and Composition API and so on and getting to the point where I was ready to add a Vuex store.
…populating a component with properties from store getters looked like this:. …according to the docs, it looks like this and with the