Menu
I'm trying to switch to using Vuex instead of my homegrown store object, and I must say I'm not finding the docs as clear as elsewhere in the Vue.js world. Let's say I have a Vuex module called 'products', with its own state, mutations, getters, etc. How do I reference an action in that module called, say, 'clearWorking Data'? The docs give this example of accessing a module's state:
store.state.a // -> moduleA's state But nothing I can see about getters, mutations, actions, etc.
916
To access getters within Vuex mutations with Vue. js, we just use the state in the getter and call the getter with the state . //... const store = new Vuex.
Vuex allows us to define "getters" in the store. You can think of them as computed properties for stores. As of Vue 3.0, the getter's result is not cached as the computed property does.
To access getters within Vuex mutations with Vue.js, we just use the state in the getter and call the getter with the state. //... const store = new Vuex.Store ( { //... getters: { foo: (state) => { return getterFunc (state); }, }, mutations: { fooMutation: (state, data) => { getterFunc (state); }, }, //... });
Vuex getters behave a lot like Mongoose getters: they're special properties that are computed from other properties when you access them. For example, suppose your store contains a user's firstName and lastName. You can write a getter that returns the user's fullName. Vuex getters react to changes in the store's state just like computed properties.
For example, suppose your store contains a user's firstName and lastName. You can write a getter that returns the user's fullName. Vuex getters react to changes in the store's state just like computed properties.
Note that getters accessed as properties are cached as part of Vue's reactivity system. You can also pass arguments to getters by returning a function. This is particularly useful when you want to query an array in the store: Note that getters accessed via methods will run each time you call them, and the result is not cached.
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. 
Access namespaced getterthis.$store.getters['yourModuleName/someGetterMethod']
Dispatch namespacedthis.$store.dispatch('yourModuleName/doSomething')
Dispatch namespaced with paramsthis.$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.
82
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.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
