vuex での mapState の考え方の応用

計算された(){
  カウント1(){
    this.targetObj.count1 を返す
  },
  カウント2(){
    this.targetObj.count2 を返す
  },
  // ...
  // これを想像してください。同様のコードを5回または10回書く必要があります}

計算された(){
  カウント（）{
    これを返します。$store.count
  }
}

  var mapState = normalizeNamespace(関数 (名前空間、状態) {
    // 指定された属性を保存および取得するオブジェクトを定義します。var res = {};
    normalizeMap(states).forEach(function (ref) {
      var キー = ref.key;
      var val = ref.val;
      // 指定されたオブジェクトの指定された属性を取得するメソッドを定義します res[key] = function mapsedState () {
        var state = this.$store.state;
        var getters = this.$store.getters;
        // 名前空間に従って指定されたストアモジュールオブジェクトを検索します if (namespace) {
          var module = getModuleByNamespace(this.$store, 'mapState', 名前空間);
          if (!モジュール) {
            戻る
          }
          状態 = module.context.state;
          ゲッター = module.context.getters;
        }
        // 名前空間を指定して取得したストアモジュールのプロパティを取得します。戻り値の typeof val === 'function'
          val.call(this, state, getters)
          : 状態[値]
      };
    });
    // 関数オブジェクトを返す return res
  });

エクスポート const mapTargetValue = (nameSpace, keyList = [])=>{
  定数結果 = {}
  // 注意: 返されるメソッドに矢印関数を使用しないでください。そうしないと、このメソッドを取得できなくなります。
  // ここでは 2 つの形式の keyList が互換性があります。mapState の属性名変更の使用形式を参照してください。if(Array.isArray(keyList)){
    keyList.forEach( キー => 結果[キー] = 関数(){ 
        // ここでは、名前空間オブジェクトを this で直接取得できると仮定します // もちろん、指定されたオブジェクトを取得する複雑さは、コード ロジックによって異なります。 return this[nameSpace][key] || 0
    })   
  }それ以外の場合(keyListのtype=== 'object' && keyList){
    for(let key in keyList){
      result[keyList[key]] = function(){ return this[nameSpace][key] || 0}
    }
  }
  結果を返す
}

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