How to access the getter from another vuex module?

Question

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.

Answer 1

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.

Answer 2

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       },       ...     }   }