vuex名前空間の使用

vuex名前空間の使用

Vuex は単一の状態ツリーを使用するため、すべてのアプリケーション状態が比較的大きなオブジェクトに集中します。アプリケーションが非常に複雑になると、ストア オブジェクトが非常に肥大化する可能性があります。

したがって、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">
</スタイル>

操作効果

vuex 名前空間の使用に関するこの記事はこれで終わりです。より関連性の高い vuex 名前空間のコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Nuxtフレームワークでvuexのモジュール設定を実装する方法
  • Vuex での Store のモジュール分割の詳細な説明
  • 簡単な例を通してvuexとモジュール性を学ぶ
  • Vuex のモジュール性 (モジュール) の詳細な理解
  • vuex の store の名前空間についての簡単な説明
  • Vuex のモジュール化と名前空間の例のデモ

<<:  MySQL での一時テーブルの使用例

>>:  Tomcatの各ポートの機能の詳細な説明

推薦する

jsはテーブルドラッグオプションを実装します

この記事の例では、テーブルドラッグオプションを実装するためのjsの具体的なコードを参考までに共有して...

CnBlogs カスタムブログスタイルの共有

半夜かけてようやくブログのスタイルを大体完成させることができました。ブログ全体が青を基調としていて、...

js配列forEachインスタンスの詳細な使用方法

1. forEach() は map() に似ています。これも渡された関数に各要素を順番に適用します...

MySQL データベースの最適化: テーブルとデータベースのシャーディング操作の詳細な説明

この記事では、例を使用して、MySQL データベースの最適化のためのテーブルおよびデータベース シャ...

CSSにおけるマージン値と垂直マージンの重なりについて

平行ボックスの余白 (二重余白の重なり) に関する面接の質問: 1 つのボックスに上余白があり、もう...

CSS での三角形の描画と巧妙な応用例の詳細な説明

鉛Web ページ上の一般的な三角形の一部は、画像やフォント アイコンにする必要なく、CSS を使用し...

Jsモジュールパッケージのエクスポートの使用法と違いにはインポートが必要

目次1. Commonjsのエクスポートとrequireの使用1.1 CommonJS エクスポート...

Ubuntu の空き容量を増やす 5 つの簡単な方法

序文ほとんどの人は、システム ディスク ストレージが少ないときにこの操作を実行するか、Linux シ...

Win7 での Mysql 5.7.17 winx64 インストール チュートリアル

ソフトウェア バージョンとプラットフォーム: MySQL-5.7.17-winx64、win7 Ho...

フラッシュプラグインを使用してPCのカメラを呼び出し、TMLページに埋め込む方法

序文この記事を書いた主な理由は、チームリーダーが、ブラウザを使用してコンピューターのカメラを呼び出し...

MySQL のロックに関する問題

ロックの分類:データ操作の粒度から:テーブルロック:操作時にテーブル全体がロックされます。行ロック:...

HTML の値属性と名前属性の機能と使用法の紹介

1. ボタンで使用される値は、「OK」、「削除」など、ボタンに表示されるテキストを指します。 2. ...

LinuxのCPU負荷とCPU使用率の詳細な説明

CPU 負荷と CPU 使用率これらは両方とも、ある程度、マシンの忙しさを反映できます。 CPU 使...

Angularの単一プロジェクトを複数プロジェクトにアップグレードするプロセス全体

目次序文開発環境新しいプロジェクトを作成するモバイルウェブプロジェクト角度付きJSONパブリックモジ...

MySQL のクエリパフォーマンスに対する制限の影響

I. はじめにまず、MySQL のバージョンについて説明します。 mysql> バージョンを選...