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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
この記事の例では、テーブルドラッグオプションを実装するためのjsの具体的なコードを参考までに共有して...
半夜かけてようやくブログのスタイルを大体完成させることができました。ブログ全体が青を基調としていて、...
1. forEach() は map() に似ています。これも渡された関数に各要素を順番に適用します...
この記事では、例を使用して、MySQL データベースの最適化のためのテーブルおよびデータベース シャ...
平行ボックスの余白 (二重余白の重なり) に関する面接の質問: 1 つのボックスに上余白があり、もう...
鉛Web ページ上の一般的な三角形の一部は、画像やフォント アイコンにする必要なく、CSS を使用し...
目次1. Commonjsのエクスポートとrequireの使用1.1 CommonJS エクスポート...
序文ほとんどの人は、システム ディスク ストレージが少ないときにこの操作を実行するか、Linux シ...
ソフトウェア バージョンとプラットフォーム: MySQL-5.7.17-winx64、win7 Ho...
序文この記事を書いた主な理由は、チームリーダーが、ブラウザを使用してコンピューターのカメラを呼び出し...
ロックの分類:データ操作の粒度から:テーブルロック:操作時にテーブル全体がロックされます。行ロック:...
1. ボタンで使用される値は、「OK」、「削除」など、ボタンに表示されるテキストを指します。 2. ...
CPU 負荷と CPU 使用率これらは両方とも、ある程度、マシンの忙しさを反映できます。 CPU 使...
目次序文開発環境新しいプロジェクトを作成するモバイルウェブプロジェクト角度付きJSONパブリックモジ...
I. はじめにまず、MySQL のバージョンについて説明します。 mysql> バージョンを選...