Comment accéder aux getters et mutations du module Vuex?

Question

J'essaie de passer à l'utilisation de Vuex au lieu de mon objet de magasin local, et je dois dire que je ne trouve pas les documents aussi clairs qu'ailleurs dans le monde Vue.js. Disons que j'ai un module Vuex appelé «produits», avec son propre état, des mutations, des getters, etc. Comment puis-je référencer une action dans ce module appelée, par exemple, «clearWorking Data»? Les documents donnent cet exemple d'accès à l'état d'un module:

store.state.a // -> moduleA's state

Mais je ne vois rien sur les getters, les mutations, les actions, etc.

Answer 1

En Plus de la accepté de répondre, je veux vous offrir un workarround pour la lecture qui est manquant dans la réponse.

Déboguer le Magasin
En tout cas, vous pouvez appeler console.log(this.$store) pour déboguer le Magasin.
Si vous faites ainsi, vous verrez les getters avec le préfixe de l'espace de noms dans leur nom.

Accès à des espaces de lecture
this.$store.getters['yourModuleName/someGetterMethod']

Envoi des espaces de
this.$store.dispatch('yourModuleName/doSomething')

Conclusion
La clé est de gérer l'espace de noms comme un Système de fichiers comme Justin expliqué.

Edit: trouvé une belle bibliothèque pour la manipulation de vuex Magasin
Outre les connaissances de base que je voudrais ajouter ce vuex bibliothèque comme une belle addition pour travailler effectivly et rapide avec le vuex magasin. https://github.com/davestewart/vuex-pathify .
Il semble assez intéressant et qui se soucie beaucoup de la configuration pour vous et vous permet également de gérer 2waybinding directement avec vuex.

Answer 2

Dans votre exemple, ce serait store.dispatch('products/clearWorkingData') vous pouvez penser aux actions / mutations comme un système de fichiers en quelque sorte. Plus les modules sont imbriqués profondément dans l'arborescence qu'ils sont.

donc vous pourriez aller store.commit('first/second/third/method') si vous aviez un arbre qui avait trois niveaux de profondeur.

Answer 3

Comme autre ajout à la réponse acceptée, si vous devez passer des paramètres au getter (par exemple pour récupérer un élément spécifique de la collection de magasins), vous devez le passer comme suit:

 this.$store.getters['yourModuleName/someGetterMethod'](myParam)
 

Je ne pense pas que j'aime beaucoup cette notation, mais c'est ce qu'elle est - du moins pour le moment.