Vuex のモジュラー (モジュール) サンプルの詳細な説明-ミニプログラム開発-php.cn

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

小云云

リリース： 2018-01-31 13:47:38

オリジナル

2948 人が閲覧しました

この記事では、主に 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公式ドキュメント