vuex中mapState思想应用

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

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

  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
}

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