We know that if we want to access the data in state in vuex.store, we need to use this.$store.state. The property name. Obviously this access to the data to write code is not concise, auxiliary functions are used to solve this problem.

Auxiliary function

Through the auxiliary functions mapState, mapActions, and mapMutations, the attributes in vuex.store are mapped to the vue instance, so that the attributes in vuex.store can be accessed in the Vue instance, which is very convenient for operating vuex.store.

The state auxiliary function is mapState, the actions auxiliary function is mapActions, and the mutations auxiliary function is mapMutations. (Vuex instance has mapState, mapActions, and mapMutations attributes, which are all functions)

How do I use helper functions

First, you need to introduce Vuex into the current component.

The auxiliary function is then called through Vuex.

How do helper functions map attributes in vuex.store

1. MapState: Map the State attribute to computed

computed:{ ... Vuex.mapState({ input:state=>state.inputVal, n:state=>state.n }) }Copy the code

State: Data in state used to store the common state is reactive.

Reactive cause: State has a getters, setters method; The data in data is also reactive, because it also has getters and setters methods

There are two ways to receive data in State in a computed property (arrays and objects, recommended objects).

Advantages:

  • The key itself is an alias, so we want the value of val, so the key a is the same as val=”a”, whatever we want. Reduce the length of attribute names in state.
  • The data in state can be viewed inside a function, in array form, by the property name in state.
computed:Vuex.mapState({ key:state=>state. Attribute})Copy the code

If its component also needs to use computed, deconstruct it by assigning values

computed:{ ... Vuex.mapState({ key:state=>state. Attribute})}Copy the code

2, mapAcions: map actions to methods

　

methods:{ ... Vuex.mapActions({ add:"handleTodoAdd"//val is the name of the actions method change:"handleInput"})}Copy the code

Add and change are aliases for action methods. Just use the add and change methods instead, but remember to do the data business logic in actions.

Equivalent to the following function call,

methods: {
	handleInput(e){           
		let val = e.target.value;
		this.$store.dispatch("handleInput",val )
	},
	handleAdd(){
		this.$store.dispatch("handleTodoAdd")}}Copy the code

The actions function is used to handle asynchronous functions and some business logic. Each function has a parameter, which is an object, and a commit method, which triggers the methods in mutations

3. MapMutations: map the methods in mutations into methods

It only makes simple data modification (such as n++), which does not involve data processing or use business logic or asynchronous function. The method in mutations can be directly called to modify data.

methods:{ ... Vuex.mapMutations({ handleAdd:"handlMutationseAdd"})}Copy the code

The function in mutations is mainly used to modify the data in state. All the methods in mutations will have two parameters, one is the state in store, and the other is the parameter to be transferred.

Understand state, Actions, mutations, can refer to the MVC framework.

  • stateThink of it as a database, except that it’s reactive and the data changes as you refresh the page;
  • actionsAs controller layer, do the business logic of data;
  • mutationsAs model layer, do data add, delete, change and check operation.

4. MapGetters: Map the getters property to computed

computed:{ ... Vuex.mapGetters({ NumN:"NumN"})}Copy the code

Getters is similar to computed in components, and it also listens for changes in properties, triggering methods in Getters when properties in State change. Each method in getters has a parameter state.

5, Modules attribute: module

Divide the common state into modules 1. Each module is equivalent to a mini-VUEX 2state getters actions mutationsRemember to add one when exporting modulesnamespaced:trueThe main function is to create a separate namespace for each module.Namespace: true,In collaborative development, it is possible that functions in the submodule and the main module will have the same name, so that when a function is called, all functions with the same name will be called, causing problems. To solve this problem, add when exporting modulesNamespace: true,So how to call the function in the submodule? Let’s say my submodule name is todo.js. The function name needs to be todo/ function name. The store instance after the output module is shown below:As you can see, the access to the state property of the Store instance has also changed after modularization,this.$store.state.todo.inputVal

A brief summary can be made of the auxiliary function, which is used by VUex as a mapping:

  • mapState/mapGettes--->computed ；
  • mapAcions/mapMutations---->methods

The namespace

When a module has a namespace enabled, it has its own namespace. Example code is as follows:

export default {
	namespaced: true. }Copy the code

MapState, mapGetters, mapMutations, mapActions The first argument is a string (namespace name), and the second argument is an array (which does not need to be renamed)/object (which needs to be renamed).

mapXXXs('Namespace name'['Attribute Name 1'.'Attribute Name 2'])

mapXXXs('Namespace name', {'New name 1 in component':'Original name 1 in Vuex'.'New name 2 in component':Original name 2 in 'Vuex ',})Copy the code

Develop reading

The Vue advanced (27) : Vuex getters, mapGetters,… mapGetters rounding

Vue Advanced (43) : Detailed solution for Vuex