vuex名前空間の使用

デフォルトでは、モジュール内のアクション、ミューテーション、ゲッターはグローバル名前空間に登録され、複数のモジュールが同じミューテーションまたはアクションに応答できるようになります。モジュールのカプセル化と再利用性を高めたい場合は、名前空間の概念が使用されます。

{
    「モジュール1」:{
        州：{}、
        ゲッター:{},
        変異:{},
        アクション:{}
    },
    「モジュール2」:{
        州：{}、
        ゲッター:{},
        変異:{},
        アクション:{}
    }
}

mapState、mapGetters、mapMutations、mapActions の最初のパラメーターは文字列 (名前空間名) であり、2 番目のパラメーターは配列 (名前を変更する必要はありません)/オブジェクト (名前を変更する必要) です。

mapXXXs('名前空間名',['属性名1','属性名2'])

mapXXXs('名前空間名',{

  「コンポーネント内の新しい名前 1」: 「Vuex 内の元の名前 1」、

  「コンポーネント内の新しい名前 2」: 「Vuex 内の元の名前 2」、

})

プロジェクト構造

js の

「vue」からVueをインポートします。
「./App.vue」からアプリをインポートします。
「./router」からルーターをインポートします。
「./store/index」からストアをインポートします。

Vue.config で productionTip を false に設定します。

新しいVue({
  ルーター、
  店、
  レンダリング: h => h(App)
}).$mount("#app");

インデックス

「vue」からVueをインポートします。
「vuex」からVuexをインポートします。
「./modules/cat」からcatをインポートします。
「./modules/dog」からdogをインポートします。

Vue.js で Vuex をビルドします。

デフォルトの新しいVuex.Storeをエクスポートします({
  モジュール: { cat, dog }
});

猫.js

エクスポートデフォルト{
  名前空間: true、
  // ローカル状態: {
    名前:「ブルーアンドホワイトブリティッシュショートヘア」
    年齢: 1
  },
  // ローカル読み取りゲッター: {
    desc: state => "ペット: " + state.name
  },
  // ローカル変更のミューテーション: {
    増分(状態、ペイロード) {
      状態.age += ペイロード数;
    }
  },
  // ローカルアクション actions: {
    grow(コンテキスト、ペイロード) {
      タイムアウトを設定する(() => {
        context.commit("増分", ペイロード);
      }, 1000);
    }
  }
};

犬.js

エクスポートデフォルト{
  名前空間: true、
  // ローカル状態: {
    名前:「ラブラドール」
    年齢: 1
  },
  // ローカル読み取りゲッター: {
    desc: state => "ペット: " + state.name
  },
  // ローカル変更のミューテーション: {
    増分(状態、ペイロード) {
      状態.age += ペイロード数;
    }
  },
  // ローカルアクション actions: {
    grow(コンテキスト、ペイロード) {
      タイムアウトを設定する(() => {
        context.commit("増分", ペイロード);
      }, 1000);
    }
  }
};

こんにちは。

<テンプレート>
  <div class="hello">
    <h3>Vuex 状態ツリー</h3>
    <div>{{this.$store.state} </div>
    <h3>マップ状態</h3>
    <div>{{catName}} {{catAge}}</div>
    <div>{{dogName}} {{dogAge}}</div>
    <h3>マップゲッター</h3>
    <div>{{catDesc}}</div>
    <div>{{犬の説明}}</div>
    <h3>マップミューテーション</h3>
    <button @click="catIncrement({num:1})">猫が変わる</button>
    <button @click="dogIncrement({num:1})">犬の変化</button>
    <h3>マップアクション</h3>
    <button @click="catGrow({num:1})">猫のアクション</button>
    <button @click="dogGrow({num:1})">犬のアクション</button>
  </div>
</テンプレート>

<スクリプト>
「vuex」から mapState、mapGetters、mapMutations、mapActions をインポートします。

エクスポートデフォルト{
  名前: "HelloWorld",
  計算: {
    ...mapState("cat", {
      猫の名前: "名前",
      catAge: 「年齢」
    }）、
    ...mapState("犬", {
      犬の名前: "名前",
      dogAge: 「年齢」
    }）、
    ...mapGetters("cat", {
      catDesc: "desc"
    }）、
    ...mapGetters("犬", {
      dogDesc: "desc"
    })
  },
  メソッド: {
    ...mapMutations("cat", { catIncrement: "increment" }),
    ...mapMutations("dog", { dogIncrement: "increment" }),
    ...mapActions("cat", { catGrow: "grow" }),
    ...mapActions("dog", { dogGrow: "grow" })
  }
};
</スクリプト>

<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイル スコープ lang="scss">
</スタイル>

操作効果