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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
CSS のみを使用してどのような充電アニメーション効果を作成できるかを見てみましょう。バッテリーを...
目次非同期を理解するフェッチ(url)レスポンス.json() asyncとawaitを組み合わせる...
ビジネスを想定: 2位の従業員の給与情報を見るデータベースを作成する emps が存在する場合はデー...
MySQL 5.5.56無料インストール版の設定方法をテキストコードで詳しく説明します。具体的な内容...
背景グループでは、CSS を使用してインセット コーナー ボタンを実装する方法や、矢印付きのボタンを...
目次LocalStorageとはSessionStorageとはLocalStorage と Ses...
複雑なテーブル構造では、一部のセルが垂直方向に複数のセルにまたがるため、列間属性 COLSPAN を...
目次ビジネスロジックデータテーブル構造クエリロジックSQL スクリプトスクリプトの説明ビジネスロジッ...
この効果はブラウザ ページで最もよく見られます。まずは効果の画像をご覧ください。 上の図に示すように...
序文日常の開発では、サーバー上でさまざまなテキストやログの表示操作を実行する必要があることがよくあり...
ブラウザウィンドウの中央に要素を配置する方法まず、コード ブロックを示します。すでにコードを理解して...
目次背景質問問題分析と解決策新たな問題問題分析と解決策背景node-schedule スケジュール ...
目次開始と停止データベース関連の操作データベーステーブル関連の操作制約関連デフォルトの制約高度なデー...
以下のように表示されます。 XML/HTML コードコンテンツをクリップボードにコピー<!DO...
具体的な方法: 1. コマンドプロンプトを開く2. mysql -u root -pコマンドを入力し...