How to access Vuex module getters and mutations?

In Addition to the accepted answer I wanna provide you with a workarround for the getter which is missing in the answer.

Debug the Store
In any case you can call console.log(this.$store) to debug the Store.
If you do so you will see the getters are prefixed with the namespace in their name. enter image description here

Access namespaced getter

this.$store.getters['yourModuleName/someGetterMethod']

Dispatch namespaced

this.$store.dispatch('yourModuleName/doSomething')

Dispatch namespaced with params

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

Conclusion
The key is to handle the namespace like a file System like Justin explained.

Edit: found a nice library for handling vuex Store
In addition to the basic knowledge I'd like to add this vuex library as a nice addition for working effectivly and fast with the vuex store. https://github.com/davestewart/vuex-pathify .
It looks pretty interesting and cares much of the configuration for you and also allows you to handle 2waybinding directly with vuex.

** Edit: Thanks to the other Answers. Added Dispatching method with params for wholeness.


In your example it would be store.dispatch('products/clearWorkingData') you can think of actions/mutations as a file system in a way. The deeper the modules are nested the deeper in the tree they are.

so you could go store.commit('first/second/third/method') if you had a tree that was three levels deep.


As another addition to the accepted answer, if you need to pass parameter(s) to the getter (for instance to fetch a specific item from the store collection), you need to pass it as follows:

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

I don't think I like this notation very much, but it is what it is - at least for the moment.

Tags:

Vue.Js

Vuex