背景：

在需要开发过程中，有的接口返回的后果中有很多字段须要展现到页面上。通常能够将这些字段在.vue文件中封装为计算属性，或者从新将对应字段赋值到 data 中的字段来达到便于应用的目标。如下：

computed(){  count1(){    return this.targetObj.count1  },  count2(){    return this.targetObj.count2  },  // ...  // 设想一下。你要写 5 遍 或者 10 遍相似的代码}

然而不论哪种办法，都会带来大量的代码冗余，极为好受。为解决这种景象，本文借用了应用了vuex 中 map 办法的思维，极大的缩减了冗余代码，并且可能对数据获取做对立的容错解决。

map办法：

vuex 中根本的 state 提取应用办法，可通过 以下形式：

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

同时 vuex 也同样留神到了问题，当 store 中要获取的数据很多时，这种形式将会产生极大的代码冗余，反复代码遍地走。你将会看到大量的计算属性的定义，以及长链路的对象属性提取。因而vuex 定义了一种 map 办法，用来批量的获取 store 中的指定数据。
这种 map 办法实际上就是一种 工厂函数（高阶函数），用来生产特定模式的函数。以下是源码，能够看到，mapState 其实最终会返回一个对象 res, res中的每个属性都是一个办法，而这个办法返回 state 中的值。

  var mapState = normalizeNamespace(function (namespace, states) {    // 定义一个对象 用于存储 获取指定属性的办法    var res = {};    normalizeMap(states).forEach(function (ref) {      var key = ref.key;      var val = ref.val;      // 定义 获取指定对象中指定属性的办法      res[key] = function mappedState () {        var state = this.$store.state;        var getters = this.$store.getters;        // 依据 namespace 查找指定的 store 模块对象        if (namespace) {          var module = getModuleByNamespace(this.$store, 'mapState', namespace);          if (!module) {            return          }          state = module.context.state;          getters = module.context.getters;        }        // 获取通过指定 namespace 失去的 store module 中的属性        return typeof val === 'function'          ? val.call(this, state, getters)          : state[val]      };    });    // 返回 函数对象    return res  });

利用：

仿照这种思维，能够对某个简单对象中的字段的获取形式进行优化。定义的工厂函数如下所示

export const mapTargetValue = (nameSpace, keyList = [])=>{  const result = {}  // 留神：返回的办法不要应用箭头函数，否则拿不到 this  // 这里 能够兼容两种模式的 keyList ，参考 mapState 中属性重命名的应用模式  if(Array.isArray(keyList)){    keyList.forEach( key => result[key] = function(){         // 这里假如 能够间接在 this 上 获取失去 namespace对象        // 当然 指定对象的获取复杂程度取决于 你的代码逻辑        return this[nameSpace][key] || 0    })     }else if(typeof keyList === 'object' && keyList){    for(let key in keyList){      result[keyList[key]] = function(){ return this[nameSpace][key] || 0}    }  }  return result}

定义的该办法应用形式与 mapState 应用形式完全一致。与之前的取值形式相比，可大大缩减反复代码量。具体利用如下

computed: {    ...mapTargetValue("targetObj", ["count1", "count2"]),    ...mapTargetValue("targetObj", { count1: "count3", count2: "count4"}),}