Vuex Mapstate Mapgetters

Posted on  by admin

My final result:

In addition to providing our Store object, Vuex also provides a series of auxiliary functions to facilitate the use of Vuex in our code, and provides a series of grammatical sugar to manipulate various attributes of the store.

Let's take a look at the following:. The mapState tool function maps the state in the store to locally computed properties. To better understand its implementation, let's first look at an example of its use:.

When the name of the computed attribute corresponds to the name of the state subtree, we can pass in an array of strings to the mapState utility function.

Through examples, we can see intuitively that the mapState function can accept either an object or an array. What on earth does it do at the bottom? Let's take a look at the definition of the function of source code.

The function first calls the normalizeMap method for the incoming parameters. Let's look at the definition of this function:.

This method determines whether the parameter map is an array. If it is an array, it calls the map method of the array to convert each element of the array into an object {key, val: key}; otherwise, the incoming map is an object (from the use scenario of mapState, the incoming parameter is either an array or an object).

We call the Object.keys method to traverse the key of the map object. Converts each key of the array to an object {key, val: key}.

Finally, we use this object array as the return value of normalizeMap. Back to the mapState function, after calling the normalizeMap function, the incoming states are converted into an array composed of {key, val} objects.

Then the forEast method is called to traverse the array and construct a new object.

Each element of the new object returns a new function, mappedState. The function determines the type of val. If Val is a function, it calls directly. With this val function, the state and getters on the current store are taken as parameters, and the return value is taken as the return value of mappedState; otherwise, the return value of this.$store.state[val] is taken as the return value of mappedState directly.

So why is the return value of the mapState function such an object, because the function of the mapState is to map the global state and getters to the computed computational properties of the current component, and we know that each computational attribute in the Vue is a function.

To illustrate this more intuitively, let's go back to the previous example:. The result after calling the mapState function is as follows:. Let's look again at an example where the mapState parameter is an array:.

The result after calling the mapState function is as follows:. The mapGetters tool function maps getter s in the store to locally computed properties.

Its function is very similar to that of mapState. Let's look directly at its implementation:. The implementation of mapGetters is similar to that of mapState, except that its value cannot be a function, but only a string, and it checks the value of val in this.$store.getters and outputs an error log for false.

For a more intuitive understanding, let's look at a simple example:. The result after calling the mapGetters function is as follows:. Let's look at another example where the parameter mapGetters is an object:.

The result after calling the mapGetters function is as follows:. The mapActions tool function maps the dispatch method in the store to the method of the component. Similar to mapState and mapGetters, it maps not to compute attributes, but to methods objects of components. Let's look directly at its implementation:.

As you can see, the implementation routine of functions is similar to that of mapState and mapGetters, or even simpler. In fact, it is a layer of function wrapping.

For a more intuitive understanding, let's look at a simple example:. The result after calling the mapActions function is as follows:. The map Mutations tool function maps the commit method in the store to the method of the component.

Almost the same as mapActions, let's look directly at its implementation:. Function implementations are almost the same as mapActions. The only difference is that the store commit method is mapped. For a more intuitive understanding, let's look at a simple example:.

The result after calling the mapMutations function is as follows:.

The store of Vuex receives the plugins option. A Vuex plug-in is a simple way to receive the store as the only parameter. Plug-ins are usually used to monitor every mutation and do something. At the end of the constructor of the store, we call the plug-in through the following code:.

We usually call the logger plug-in when we instantiate the store. The code is as follows:. In these two examples, we call devtoolPlugin and createLogger () plug-ins, which are built-in Vuex plug-ins.

Let's look at their implementations next. The main function of devtool Plugin is to display the status of Vuex by using the developer tools of Vue and Vuex.

Its source code is in src/plugins/devtool.js, so let's see what the plug-in actually does. From the point of view of the exposed devtoolPlugin function, the function first judges the value of devtoolHook.

If our browser is equipped with the Vue developer tool, then there will be a u VUE_DEVTOOLS_GLOBAL_HOOK_ reference on window s, then the devtoolHook will point to this reference. Next, a Vuex initialization event is dispatched through devtoolHook.emit('vuex:init', store), so that the developer tool can get the current store instance.

Next, the traval-to-state event of Vuex is monitored by devtoolHook.on ('vuex: travel-to-state', targetState => {store.replaceState (targetState)}), which replaces the current state tree with the target state tree.

This function also replaces the state of Vuex with the Vue developer tool.