Explication détaillée des exemples modulaires (modules) de Vuex

Cet article vous présente principalement la modularité de Vuex. L'éditeur pense que c'est plutôt bien. Maintenant, je vais le partager avec vous et vous donner une référence, j'espère que cela pourra vous aider.

1. Pourquoi la modularisation est nécessaire

Les exemples que nous avons mentionnés plus tôt sont tous réalisés dans un arbre d'état. Lorsqu'un projet est relativement important, tous les états seront rassemblés. Procurez-vous un objet relativement volumineux, qui devient gonflé et difficile à entretenir. Afin de résoudre ce problème, Vuex nous permet de diviser le magasin en modules. Chaque module a son propre état, mutation, action, getter, et peut même imbriquer des modules vers le bas. Regardons un exemple de modularisation typique ci-dessous

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. L'état local du module

La mutation et le getter à l'intérieur du module, le premier paramètre (état) reçu est l'objet d'état local du module, 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. Espace de noms (assurez-vous de le lire ici, sinon vous vous ferez parfois tromper)

Dans tous les exemples ci-dessus, les actions, mutations et getters à l'intérieur du module sont enregistrés dans l'espace de noms global If. vous êtes dans ModuleA et moduleB déclarez des actions, des mutations ou des getters (appelés certains) avec le même nom respectivement. Lorsque vous utilisez store.commit('some'), les modules A et B répondront en même temps. Ainsi, si vous souhaitez que votre module soit plus autonome et réutilisable, vous pouvez ajouter namespaced: true pour en faire un module avec espace de noms. Lorsqu'un module est enregistré, tous ses getters, actions et mutations appelleront automatiquement le nom complet en fonction du chemin enregistré par le module. Par exemple :

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']
   }
  }
  }
 }
 }
})

Les getters et actions avec l'espace de noms activé seront localisés. getter, dispatch et commit. Vous n'avez pas besoin d'ajouter un préfixe de nom d'espace dans le même module lorsque vous utilisez le contenu du module, et vous n'avez pas besoin de modifier le code dans le module après avoir modifié l'attribut namespaced.

4. Accédez au contenu global (Global Assets) dans le module d'espace de noms

Si vous souhaitez utiliser l'état global et le getter, roorState et rootGetter seront transmis au getter comme troisième et quatrième paramètres. . L'action sera également transmise via les attributs de l'objet contextuel. Si vous devez distribuer l'action ou soumettre la mutation dans l'espace de noms global, transmettez simplement { root: true } comme troisième paramètre à distribuer ou à valider.

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. Liaison des fonctions avec un espace de noms

Comme mentionné précédemment, après avoir apporté un espace de noms, l'espace de noms doit être écrit lors de l'appel, mais c'est plus fastidieux, surtout lorsqu'il s'agit de multi -Niveau d'imbrication (bien sûr, ne vous emboîtez pas trop pendant le développement, vous aurez le vertige...)

Regardons la méthode générale d'écriture

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'
 ])
 }
}

Pour cette situation, vous pouvez transmettre l'espace de noms du module comme premier argument à la fonction ci-dessus, afin que toutes les liaisons utilisent automatiquement le module comme contexte. L'écriture simplifiée est

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

6. Réutilisation du module

Parfois, nous pouvons créer plusieurs instances d'un module, par exemple :

• Créer plusieurs magasins , ils partagent un module

• Enregistrer plusieurs fois le même module dans un magasin

  
  

Si on utilise un objet pur pour déclarer le l'état du module, alors cet objet d'état sera partagé via des références, provoquant une contamination mutuelle des données.

En fait, les données du composant Vue ont le même problème, donc la solution est la même. Utilisez une fonction pour déclarer l'état du module (supporté dans la version 2.3.0+)

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

7. . Résumé

Le contenu de la modularité est terminé ici. Cette fois, nous expliquons principalement les raisons de l'émergence des modules, comment les utiliser, les espaces de noms des modules à espace de noms global et local, l'accès local au contenu global et la carte. fonctions avec des espaces de noms. Réutilisation des fonctions et modules liés.

Citation

https://vuex.vuejs.org Documentation officielle de Vuex

Recommandations associées :

vuex2.0 détaillée explication de l'instance de modules

Explication détaillée de Vue + Vuex Explication détaillée de l'utilisation de l'instance vm.$nextTick

Apprendre Vuex simple et la modularisation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!