Vuex は単一の状態ツリーの使用を重視しています。つまり、プロジェクト内にストアが 1 つだけ存在し、このストアがプロジェクト内のすべてのデータとそのデータに対する操作を集中管理します。しかし、これが引き起こす問題は、ストアが非常に肥大化して保守が困難になる可能性があるため、状態ツリーをモジュールに分割する必要があることです。
チュートリアルの例
この例は、vue-cli に基づいて構築されています。以下は、src ファイルの下のコンテンツ ディレクトリです。
├── App.vue ├── components // 组件文件夹 │ ├── tab1.vue │ ├── tab2.vue │ ├── tab3.vue │ └── tab4.vue ├── main.js // vue的主文件入口 ├── router // vue-router文件 │ └── index.js └── store // vuex文件 ├── action.js // action ├── getter.js // getter ├── index.js // vuex的主文件 ├── module // 模块文件 │ ├── tab2.js │ └── tab3.js ├── mutation-type.js // mutation常量名文件 └── mutation.js // mutation
効果はこんな感じです(シンプルさを嫌いにしないでください)
この例では、モジュール関連の知識を含む、基本的に一般的な、ドキュメントで言及されているすべての vuex 関連の知識を使用しました。使用シナリオは次のとおりです。すべてカバーされています。
これ以上ナンセンスはありません、始めましょう。
まず、app.vue と router はルーティングに関連するもので、ドキュメントを見れば理解できます。
vuex のモジュール化
この例を書く前に、私は最初はかなり新鮮でした。結局のところ、vuex はこれまでのプロジェクトでは深く使用されていませんでした。 vuex を含む js で機能はすべて完成しましたが、プロジェクトが複雑な場合は確かにこのように書くことはできません。そのため、この点についてのアイデアを明確にするためにサンプルを書きたいと思いました。結果は非常に簡単です。
ストア ファイルのコンテンツは、vuex の 5 つの中心的な概念に従って構築されており、そうすることの利点は、mutation.js や mutation-type.js など、ビジネス ロジックの整理やその後のメンテナンスに非常に便利です。
ミューテーション内のメソッド名を定数として抽出し、別のファイルに置き、使用するときに関連するコンテンツを引用します。これは、どのメソッドが存在するかを管理および理解するのが非常に簡単で、非常に直感的です。一方、アクションを使用する必要がある場合もあります。同じメソッド名を使用して、定数ファイルを導入するだけで済みます。// mutation-type.js const CHANGE_COUNT = 'CHANGE_COUNT'; export default { CHANGE_COUNT }
// mutation.js import type from './mutation-type' let mutations = { [type.CHANGE_COUNT](state) { state.count++ } } export default mutations
// action.js import type from './mutation-type' let actions = { [type.CHANGE_COUNT]({ commit }) { commit(type.CHANGE_COUNT) } } export default actions
// tab1.vue <template> <p> <p>这是tab1的内容</p> <em @click="add">{{count}}</em> <p>getter:{{NewArr}}</p> </p> </template> <script> import { mapActions, mapGetters } from "vuex"; import type from "../store/mutation-type"; export default { computed: { ...mapGetters([ 'NewArr' ]), count: function() { return this.$store.state.count; }, }, methods: { ...mapActions({ CHANGE_COUNT: type.CHANGE_COUNT }), add: function() { this.CHANGE_COUNT(type.CHANGE_COUNT); } } }; </script> <style lang="" scoped> </style>
import Vuex from 'vuex' import Vue from 'vue' import actions from './action' import mutations from './mutation' import getters from './getter' import tab2 from './module/tab2' import tab3 from './module/tab3' Vue.use(Vuex) let state = { count: 1, arr:[] } let store = new Vuex.Store({ state, getters, mutations, actions, modules:{ tab2,tab3 } }) export default store
<em @click="CHANGE_COUNT">{{count}}</em>
Vuex改善学習の共有
以上が簡単な vuex とモジュール化を学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。