Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to use mapState in vuex". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use mapState in vuex.

Catalogue

1. Map method

2. Application

Background:

In the process of requirements development, there are many fields in the results returned by some interfaces that need to be displayed on the page. Usually these fields can be encapsulated as calculated properties in a .vue file, or the corresponding fields can be re-assigned to fields in data for ease of use. As follows:

Computed () {count1 () {return this.targetObj.count1}, count2 () {return this.targetObj.count2}, / /... / / imagine. You have to write similar code 5 or 10 times}

But either way, it will bring a lot of code redundancy, which is extremely uncomfortable. In order to solve this phenomenon, this paper borrows the idea of using the map method in vuex, greatly reduces the redundant code, and can do unified fault-tolerant processing for data acquisition.

1. Map method

The basic state extraction method in vuex can be used in the following ways:

Computed () {count () {return this.$store.count}}

At the same time, vuex also noticed the problem. When there is a lot of data to be fetched in store, this approach will result in a great deal of code redundancy and repetitive code everywhere. You will see a large number of definitions of computational attributes, as well as object attribute extraction for long links. So vuex defines a map method that is used to get specified data in store in batches.

This map method is actually a factory function (higher-order function) that is used to produce a specific form of function. Here's the source code, and you can see that mapState actually returns an object res, each property in res is a method, and this method returns the value in state.

Var mapState = normalizeNamespace (function (namespace, states) {/ / define an object to store the method var res = {}; normalizeMap (states) .forEach (function (ref) {var key = ref.key; var val = ref.val; / / define the method res [key] = function mappedState () {var state = this.$store.state) to get the specified property in the specified object Var getters = this.$store.getters; / / find the specified store module object if (namespace) {var module = getModuleByNamespace (this.$store, 'mapState', namespace); if (! module) {return} state = module.context.state; getters = module.context.getters based on namespace } / / get the attribute return typeof val = = 'function'? in store module obtained by specifying namespace? Val.call (this, state, getters): state [val]};}); / / return function object return res}); 2. Application

Following this idea, the way of obtaining fields in a complex object can be optimized. The factory function defined is as follows

Export const mapTargetValue = (nameSpace, keyList = []) = > {const result = {} / / Note: do not use the arrow function for the returned method, otherwise you will not get this / / two forms of keyList can be compatible here. Refer to the usage form of attribute renaming in mapState if (Array.isArray (keyList)) {keyList.forEach (key = > result [key] = function () {/ / it is assumed that the namespace object can be obtained directly on this / / of course the complexity of the specified object depends on your code logic return this [nameSpace] [key] | | 0}) } else if (typeof keyList = = 'object' & & keyList) {for (let key in keyList) {result [keyList] = function () {return this [nameSpace] [key] | | 0} return result}

The defined usage of this method is exactly the same as that of mapState. Compared with the previous value method, the amount of repeated code can be greatly reduced. The specific applications are as follows

Computed: {. MapTargetValue ("targetObj", ["count1", "count2"]),... mapTargetValue ("targetObj", {count1: "count3", count2: "count4"}),} so far, I believe you have a deeper understanding of "how to use mapState in vuex". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.