Vuex のモジュラー (モジュール) サンプルの詳細な説明

この記事では、主に Vuex のモジュール性について紹介します。これが非常に優れていると思いますので、参考にしていただければ幸いです。

1. モジュール化が必要な理由

先ほど説明した例はすべてステート ツリーで実行され、プロジェクトが比較的大きい場合、すべてのステートが集められて比較的大きなオブジェクトが表示されます。肥大化し、維持するのが困難です。この問題を解決するために、Vuex ではストアをモジュールに分割することができ、各モジュールには独自の状態、ミューテーション、アクション、ゲッターがあり、モジュールを下方向にネストすることもできます

const moduleA = {
 state: {....},
 mutations: {....},
 actions: {....},
 getters: {....}
}

const moduleB = {
 state: {....},
 mutations: {....},
 actions: {....},
 getters: {....}
}

const store = new Vuex.Store({
 modules: {
 a: moduleA,
 b: moduleB
 }
})

store.state.a // moduleA的状态
store.state.b // moduleB的状态

2。モジュールのローカル状態

モジュール内の突然変異とゲッター、受け取った最初のパラメーター (状態) は、モジュールのローカル状態オブジェクト、rootState です

const moduleA = {
 state: { count: 0},
 mutations: {
 increment (state) {
  // state是模块的局部状态，也就是上面的state
  state.count++
 }
 },
 getters: {
 doubleCount (state, getters, rootState) {
  // 参数 state为当前局部状态，rootState为根节点状态
  return state.count * 2
 }
 },
 actions: {
 incremtnIfOddRootSum ( { state, commit, rootState } ) {
  // 参数 state为当前局部状态，rootState为根节点状态
  if ((state.cont + rootState.count) % 2 === 1) {
  commit('increment')
  }
 }
 }
}

3. 名前空間 (必ずここを読んでください。そうでない場合は、上記のすべての例では、 moduleA で同じ名前のアクション、ミューテーション、またはゲッター (some と呼ばれる) を宣言すると、モジュール内のアクション、ミューテーション、ゲッターがグローバル名前空間に登録されます。 store.commit('some') を使用すると、モジュール A とモジュール B が同時に応答します。したがって、モジュールをより自己完結型で再利用可能にしたい場合は、namespaced: true を追加して名前空間モジュールにすることができます。モジュールが登録されると、そのすべてのゲッター、アクション、およびミューテーションは、モジュールによって登録されたパスに従って自動的に名前全体を呼び出します。 例:

const store = new Vuex.Store({
 modules: {
 account: {
  namespaced: true,
  state: {...}, // 模块内的状态已经是嵌套的，namespaced不会有影响
  getters: {  // 每一条注释为调用方法
  isAdmin () { ... } // getters['account/isAdmin']
  },
  actions: {
  login () {...} // dispatch('account/login')
  },
  mutations: {
  login () {...} // commit('account/login')
  },
  modules: {  // 继承父模块的命名空间
  myPage : {
   state: {...},
   getters: {
   profile () {...}  // getters['account/profile']
   }
  },
  posts: { // 进一步嵌套命名空间
   namespaced: true,
   getters: {
   popular () {...} // getters['account/posts/popular']
   }
  }
  }
 }
 }
})

名前空間を有効にするゲッターとアクションは、ローカライズされたゲッター、ディスパッチ、そしてコミットします。モジュール コンテンツを使用するときに同じモジュールにスペース名プレフィックスを追加する必要はありません。また、namespaced 属性を変更した後にモジュール内のコードを変更する必要もありません。

4. 名前空間モジュールのグローバル コンテンツ (グローバル アセット) にアクセスします

グローバル状態とゲッターを使用する場合は、rootState と rootGetter が 3 番目と 4 番目のパラメーターとしてゲッターに渡され、コンテキスト オブジェクトのプロパティを使用して、アクションを配布するか、アクションに入るときにグローバル名前空間でミューテーションを送信する必要がある場合は、ディスパッチまたはコミットする 3 番目のパラメーターとして { root: true } を渡すだけです。

modules: {
 foo: {
 namespaced: true,
 getters: {
  // 在这个被命名的模块里，getters被局部化了
  // 你可以使用getter的第四个参数来调用 'rootGetters'
  someGetter (state, getters, rootSate, rootGetters) {
  getters.someOtherGetter // -> 局部的getter， ‘foo/someOtherGetter'
  rootGetters.someOtherGetter // -> 全局getter, 'someOtherGetter'
  }
 },
 actions: {
  // 在这个模块里，dispatch和commit也被局部化了
  // 他们可以接受root属性以访问跟dispatch和commit
  smoeActino ({dispatch, commit, getters, rootGetters }) {
  getters.someGetter // 'foo/someGetter'
  rootGetters.someGetter // 'someGetter'
  dispatch('someOtherAction')  // 'foo/someOtherAction'
  dispatch('someOtherAction', null, {root: true}) // => ‘someOtherAction'
  commit('someMutation') // 'foo/someMutation'
  commit('someMutation', null, { root: true }) // someMutation
  }
 }
 }
}

5. 名前空間を使ったバインディング関数

前に述べたように、名前空間を取得した後、呼び出すときに名前空間を記述する必要がありますが、特に複数レベルのネストが含まれる場合、これはさらに面倒です (もちろん開発はネストしないでください)多すぎるとめまいがします。)

一般的な書き方を見てみましょう

computed: {
 ...mapState({
 a: state => state.some.nested.module.a,
 b: state => state.some.nested.module.b
 }),
 methods: {
 ...mapActions([
  'some/nested/module/foo',
  'some/nested/module/bar'
 ])
 }
}

この場合、モジュールの名前空間を最初のパラメータとして上記の関数に渡すことができ、すべてのバインドが自動的に行われます。コンテキストとして使用されます。簡略化した書き方は

computed: {
 ...mapStates('some/nested/module', {
 a: state => state.a,
 b: state => state.b
 })
},
methods: {
 ...mapActions('some/nested/module',[
 'foo',
 'bar'
 ])
}

6. モジュールの再利用

場合によっては、モジュールの複数のインスタンスを作成することがあります。例:

複数のストアを作成し、それらはモジュールを共有します
同じモジュールをストアに複数回登録しますモジュール

• 
  

純粋なオブジェクトを使用してモジュールの状態を宣言すると、この状態オブジェクトは参照を通じて共有され、データが互いに汚染されてしまいます。

実際、Vue コンポーネント内のデータも同じ問題を抱えているため、解決策は同じです。モジュールのステータスを宣言する関数を使用します (2.3.0 以降でサポート)

const MyModule = {
 state () {
 return {
  foo: 'far'
 }
 }
}

7. まとめ

の内容今回はモジュールが登場する理由、使い方、グローバルとローカルの名前空間を持つモジュールの名前空間、グローバルコンテンツへのローカルアクセス、マップ関数の名前空間とのバインディング機能、モジュールの再利用を中心に説明します。

引用

https://vuex.vuejs.org Vuex公式ドキュメント

関連推奨事項:

vuex2.0モジュール例の詳細な説明

vm.$nextTickインスタンスの詳細を使用したVue + Vuexの詳細な説明

簡単な vuex とモジュール化を学びましょう

以上がVuex のモジュラー (モジュール) サンプルの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。