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.

score 142 · Accepted Answer · answered Sep 01 '17 at 11:57

142

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.

answered Sep 01 '17 at 11:57

Stephan-v

14,707
17
87
176

120

If the module of the getter you're accessing is namespaced, you'll need to use `rootGetters['moduleName/getterName']`. – thanksd Sep 01 '17 at 13:16
@thanksd and if we want to pass argument to 'moduleName/getterName', what is the syntax then? – John Overiron Aug 07 '19 at 14:11
@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: https://stackoverflow.com/questions/41503527/vuexjs-getter-with-argument – thanksd Aug 08 '19 at 13:13
They do. Even in the discussion You point to, there are examples with getter with argument. And in official doc: https://vuex.vuejs.org/guide/getters.html#method-style-access And I just struggle to call them with param using rootGetters['module/getterName'] notation – John Overiron Aug 08 '19 at 14:24
4

@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)`. – thanksd Aug 09 '19 at 15:19
@thanksd 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']()` – sceee Apr 03 '20 at 11:08
If your getter is async, you can get the value the following way (Typescript): `const myData = (await context.rootGetters['module/getterName']()) as MyType` – sceee Apr 03 '20 at 11:12

score 19 · Answer 2 · answered Sep 06 '20 at 15:46

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

How to access the getter from another vuex module?

2 Answers2

Linked