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の各ポートの機能の詳細な説明

推薦する

クールな充電アニメーションを実現する純粋なCSS

CSS のみを使用してどのような充電アニメーション効果を作成できるかを見てみましょう。バッテリーを...

jsフェッチ非同期リクエストの使用の詳細な例

目次非同期を理解するフェッチ(url)レスポンス.json() asyncとawaitを組み合わせる...

MySQLでorder byを使用せずにランキングを実装する3つの方法のまとめ

ビジネスを想定: 2位の従業員の給与情報を見るデータベースを作成する emps が存在する場合はデー...

MySQL 5.5.56 インストール不要版の設定方法

MySQL 5.5.56無料インストール版の設定方法をテキストコードで詳しく説明します。具体的な内容...

CSSを使用して、頻繁に表示される奇妙なボタンを簡単に実装します。

背景グループでは、CSS を使用してインセット コーナー ボタンを実装する方法や、矢印付きのボタンを...

Vue における LocalStorage と SessionStorage の違いと使い方

目次LocalStorageとはSessionStorageとはLocalStorage と Ses...

HTML テーブルタグチュートリアル (35): 列間属性 COLSPAN

複雑なテーブル構造では、一部のセルが垂直方向に複数のセルにまたがるため、列間属性 COLSPAN を...

MySQL テーブル結合クエリでグループ化と重複排除を実装する例

目次ビジネスロジックデータテーブル構造クエリロジックSQL スクリプトスクリプトの説明ビジネスロジッ...

ズームインとズームアウトの閉じるボタンを実現する CSS (サンプル コード)

この効果はブラウザ ページで最もよく見られます。まずは効果の画像をご覧ください。 上の図に示すように...

Linux でテキストを表示するためのヒント (非常に実用的!)

序文日常の開発では、サーバー上でさまざまなテキストやログの表示操作を実行する必要があることがよくあり...

要素を中央に配置するための配置方法 (Web ページ レイアウトのヒント)

ブラウザウィンドウの中央に要素を配置する方法まず、コード ブロックを示します。すでにコードを理解して...

Docker コンテナのタイムゾーン エラーの問題

目次背景質問問題分析と解決策新たな問題問題分析と解決策背景node-schedule スケジュール ...

MySQLでよく使われるSQLとコマンドの入力からデータベースの削除、そして終了まで

目次開始と停止データベース関連の操作データベーステーブル関連の操作制約関連デフォルトの制約高度なデー...

HTMLフォーム要素の包括的な理解

以下のように表示されます。 XML/HTML コードコンテンツをクリップボードにコピー<!DO...

MySQLでユーザー認証情報を表示する具体的な方法

具体的な方法: 1. コマンドプロンプトを開く2. mysql -u root -pコマンドを入力し...