How to access the getter from another vuex module?
Within a vuex getter I know it is possible to access the state from another vuex module like so:
pages: (state, getters, rootState) => {
console.log(rootState);
}
How can I access a getter from another vuex module instead of the state though?
I have another vuex module called filters that I need to access, I have tried this:
rootState.filters.activeFilters
Where activeFilters is my getter but this does not work. using rootState.filters.getters.activeFilters also does not work.
Had to dig through the documentation but I found it:
https://vuex.vuejs.org/en/api.html
(Ctrl+F search for RootGetters on that page)
My code becomes:
pages: (state, getters, rootState, rootGetters) => {}
Beware that all rootGetters are global and you no longer use it like rootState where you would prefix the state by the module name.
You simply call a getter from another module like so:
rootGetters.activeFilters
Hopefully this will help someone out in the future who is running into this as well.
If you want to access global/namespaced getter from the module, Here is how you can it,
getters: {
// `getters` is localized to this module's getters
// you can use rootGetters via 4th argument of getters
someGetter (state, getters, rootState, rootGetters) {
rootGetters.someOtherGetter //'someOtherGetter' global getter
rootGetters['bar/someOtherGetter'] //'bar/someOtherGetter' namespaced getter
},
...
},
Here is the way to access actions, Also includes usage of action and mutations for the reference.
actions: {
// dispatch and commit are also localized for this module
// they will accept `root` option for the root dispatch/commit
someAction ({ dispatch, commit, getters, rootGetters }) {
rootGetters.someGetter //'someGetter' global getter
rootGetters['bar/someGetter'] //'bar/someGetter' namespaced getter
dispatch('someOtherAction') //'someOtherAction' local action
dispatch('someOtherAction', null, { root: true }) //'someOtherAction' namespaced action
commit('someMutation') //'someMutation' local mutation
commit('someMutation', null, { root: true }) //'someMutation' namespaced mutation
},
...
}
}
If you have nested (and namespaced) modules, you can do the following to access the getters of a module that is nested inside another module (e.g. in Vue.js):
this.$store.getters['outerModuleName/innerModuleName/nameOfTheGetter']
Follow WeChat
Success story sharing
Want to stay one step ahead of the latest teleworks?
Subscribe Now相似问题
- How do I remove a property from a JavaScript object?
- How do I copy to the clipboard in JavaScript?
- How do I redirect to another webpage?
- How do I include a JavaScript file in another JavaScript file?
- How do I make the first letter of a string uppercase in JavaScript?
- How can I remove a specific item from an array?
- How does data binding work in AngularJS?
- How does Access-Control-Allow-Origin header work?
- How do I return the response from an asynchronous call?
- How to access the correct `this` inside a callback
rootGetters['moduleName/getterName'].rootGetters['module/getterName']getter to return a function as in your linked example. Once you do, then you would be able to pass an argument to that returned function viarootGetters['module/getterName'](myArg).