vuex の補助関数 mapGetters の基本的な使い方の詳細な説明

mapGettersヘルパー関数

mapGettersヘルパー関数は、ストア内のゲッターをローカルの計算プロパティにマップするだけです。

1. コンポーネントまたはインターフェース内の vuex の getter を呼び出すために mapGetter を使用しないでください。

1.1 マッピングのルートストアでゲッターを呼び出す

<!-- test.vue -->
<テンプレート>
  <div class="vuexResponse">
    <div @click="changeVal">クリック</div>
    <div>"stateHello： "{{stateHello}}</div>
    <div>"gettersHello: "{{gettersHello}}</div>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  時計：
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  計算: {
    ステートハロー() {
      これを返します。$store.state.stateHello
    },
    ゲッターHello() {
      これを返します。$store.getters.gettersHello
    }
  },
  メソッド: {
    変更値() {
      this.$store.commit("mutationsHello", 2)
    }
  }
}
</スクリプト>

/**
 * ストア
 */
'vue' から Vue をインポートします
'vuex' から Vuex をインポートします

Vue.use(Vuex)
デフォルトの新しいVuex.Storeをエクスポートします({
  州： {
    状態こんにちは: 1
  },
  ゲッター: {
    gettersHello: (状態) => {
      state.stateHello * 2 を返す
    }
  },
  突然変異:
    変異Hello(状態、値) {
      console.log("val", val); // 2
      state.stateHello += val
    }
  },
})

プロセス: クリックして、test.vue インターフェースで changeVal() を呼び出します。changeVal メソッドは、パラメータ val を commite に渡し、store.js で mutationsHello() メソッドを呼び出します。mutationsHello メソッドは、state の stateHello の値を変更します。stateHello の値は、getters の gettersHello で監視されます。stateHello の値の変更により、gettersHello がトリガーされます。計算された test.vue インターフェースでは、store.getters.gettersHello が計算され、gettersHello が store.gettes.gettersHello の値にマップされます。GettersHello は、テンプレートを通じて dom にレンダリングされます。同時に、gettersHello の変更により、watch で gettersHello がトリガーされ、store.getters.gettersHello のデータの変更が監視されることもあります。

1.2 マッピングモジュールのモジュールストアでゲッターを呼び出す

<!-- moduleTest.vue -->
<テンプレート>
  <div class="vuexResponse">
    <div @click="changeVal">クリック</div>
    <div>stateHello: {{stateHello}}</div>
    <div>gettersHello: {{gettersHello}}</div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  時計：
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  計算: {
    ステートハロー() {
      これを返します。$store.state.vuexTest.stateHello
    },
    ゲッターHello() {
      this.$store.getters['vuexTest/gettersHello'] を返します。
    }
  },
  メソッド: {
    変更値() {
      this.$store.commit("vuexTest/mutationsHello", 2)
    }
  }
}
</スクリプト>

/**
 * モジュール vuexTest.js
 */
エクスポートデフォルト{
    名前空間: true、
    州： {
        状態Hello: 1,
    },
    ゲッター: {
        gettersHello: (状態、ゲッター、ルート状態、ルートゲッター) => {
            console.log("状態", 状態);
            console.log("ゲッター", ゲッター);
            コンソールにログ出力します。
            コンソールにログ出力します。
            state.stateHello * 2 を返す
        }
    },
    突然変異:
        変異Hello(状態、値) {
            コンソールログ("1111");
            console.log("val", val);
            state.stateHello += val
        }
    },
    アクション: {

    }
}

computed のマッピングモジュールでゲッターを計算する方法は、モジュールの状態のデータを取得する方法とは異なることに注意してください。

this.$store.getters['vuexTest/gettersHello']

2. mapGetterを使用して、コンポーネントまたはインターフェース内のvuexのゲッターを呼び出す

2.1 マッピングのルートストアでゲッターを呼び出す

/**
 * ストア
 */
 'vue' から Vue をインポートします
 'vuex' から Vuex をインポートします
 
 Vue.use(Vuex)
 デフォルトの新しいVuex.Storeをエクスポートします({
   州： {
     状態こんにちは: 1
   },
   ゲッター: {
     gettersHello: (状態) => {
       state.stateHello * 2 を返す
     }
   },
   突然変異:
     変異Hello(状態、値) {
       state.stateHello += val
     }
   },
 })

<!-- テスト.vue -->
<テンプレート>
  <div class="vuexResponse">
    <div @click="changeVal">クリック</div>
    <div>stateHello: {{stateHello}}</div>
    <div>gettersHello: {{gettersHello}}</div>
    <div>gettersHelloOther {{gettersHelloOther}}</div>
  </div>
</テンプレート>

<スクリプト>
「vuex」から mapGetters をインポートします。
エクスポートデフォルト{
  名前: "vuexReponse",
  コンポーネント:

  },
  データ（） {
    戻る {

    }
  },
  時計：
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  計算: {
    ステートハロー() {
      これを返します。$store.state.stateHello
    },
    ...mapGetters(["gettersHello"]), // 配列形式...mapGetters({ // オブジェクト形式 gettersHello: "gettersHello"
    }）、
    ...mapGetters({
      gettersHelloOther: "gettersHello" // オブジェクト形式でマッピングを変更します }),
  },
  メソッド: {
    変更値() {
      this.$store.commit("mutationsHello", 2)
    }
  }
}
</スクリプト>

2.2 マッピングのルートストアでゲッターを呼び出す

/**
 * vuexTest.js
 */
 エクスポートデフォルト{
    名前空間: true、
    州： {
        状態Hello: 1,
    },
    ゲッター: {
        gettersHello: (状態、ゲッター、ルート状態、ルートゲッター) => {
            console.log("状態", 状態);
            console.log("ゲッター", ゲッター);
            コンソールにログ出力します。
            コンソールにログ出力します。
            state.stateHello * 2 を返す
        }
    },
    突然変異:
        変異Hello(状態、値) {
            コンソールログ("1111");
            console.log("val", val);
            state.stateHello += val
        }
    },
    アクション: {

    }
}

<!-- モジュール test.vue -->
<テンプレート>
  <div class="vuexResponse">
    <div @click="changeVal">クリック</div>
    <div>stateHello: {{stateHello}}</div>
    <div>gettersHello: {{gettersHello}}</div>
    <div>gettersHelloOther {{gettersHelloOther}}</div>
  </div>
</テンプレート>

<スクリプト>
「vuex」から mapGetters をインポートします。
エクスポートデフォルト{
  名前: "vuexReponse",
  時計：
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  計算: {
    ステートハロー() {
      これを返します。$store.state.vuexTest.stateHello
    },
    ...mapGetters(["vuexTest/gettersHello"]), // 配列形式...mapGetters("vuexTest", { // オブジェクト形式 gettersHello: "gettersHello"
    }）、
    ...mapGetters("vuexTest", {
      gettersHelloOther: "gettersHello" // オブジェクト形式でマッピングを変更します }),
  },
  メソッド: {
    変更値() {
      this.$store.commit("vuexTest/mutationsHello", 2)
    }
  }
}
</スクリプト>

これら 3 つの形式...mapGetters(["vuexTest/gettersHello"]), // 配列形式...mapGetters("vuexTest", { // オブジェクト形式 gettersHello: "gettersHello"
    }）、
    ...mapGetters("vuexTest", {
      gettersHelloOther: "gettersHello" // オブジェクト形式でマッピングを変更します }),

これで、vuex の補助関数 mapGetters の基本的な使い方についての記事は終了です。vuex mapGetters の使い方に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: