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.

Mindszenty

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.

Mindszenty

If the module of the getter you're accessing is namespaced, you'll need to use rootGetters['moduleName/getterName']. – Pease

@Pease and if we want to pass argument to 'moduleName/getterName', what is the syntax then? – Florettaflorette

@JohnOveriron getters don't take in arguments, so I'm not sure what you're referring to. Your getter could return a function which takes in arguments and you could do that like so: #41504027 – Pease

They do. Even in the discussion You point to, there are examples with getter with argument. And in official doc: vuex.vuejs.org/guide/getters.html#method-style-access And I just struggle to call them with param using rootGetters['module/getterName'] notation – Florettaflorette

@JohnOveriron the example you linked to is a getter that returns a function which itself accepts an argument (its a subtle distinction). But this does not happen out of the box; you would need to specifically implement your 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 via rootGetters['module/getterName'](myArg). – Pease

@Pease mentioning the () was actually important for me to call it from an action. I just wanted the getter to be called so I had to call it this way context.rootGetters['module/getterName']() – Wingard

If your getter is async, you can get the value the following way (Typescript): const myData = (await context.rootGetters['module/getterName']()) as MyType – Wingard

Answer 2

If you want to access global/namespaced getter from the module, Here is how you can,

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

Ameba

Answer 3

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']

Cerberus