Vuex namespace getters - Accessing across modules

I’m using vuex namespace and cannot get getters to work across modules. I pass getters and rootGetters in the correct order (copy paste from docs) and they just do not seem to work the way the docs say. I can’t get them to work at all…

How do I do it correctly?

this is what the docs say:

Module-foo

getters: {
  // `getters` is localized to this module's getters
  // you can use rootGetters via 4th argument of getters
  someGetter (state, getters, rootState, rootGetters) {
    getters.someOtherGetter // -> 'foo/someOtherGetter'  **<- How is this different**
    rootGetters.someOtherGetter // -> 'someOtherGetter'  **<- from this?**
  },
  someOtherGetter: state => { ... }
},

This is what I tried:

Module-A

state: {
  thing: 'thing'
},
getters: {

getThing(state){
    return state.thing;
  }

}

Module-B

getters: {
	getValueFromModuleA (state, getters, rootState, rootGetters) {

	getters.getThing;    // -> undefined
	rootGetters.getThing;    // -> undefined

}
}

How do I get ‘thing’ from Module-A ?

In your code in module-b you’re trying to access the function itself within the function. That’s not going to work. You should be able to access getThing like this rootGetters.getThing

Sorry, that was a mistake in my example code only. I wrote it in notepad. Copy and paste error.

I was trying to make a simplified example that is easily and widely applicable.

If I use
rootGetters.getThing
I get undefined.

I will correct the example code. Thank you for the correction.

Could it be something in my configuration?

Could very well be. That should definitely work. Would need more of your code to know. Can you paste both the modules and your store instance?

Is it generally acceptable if instead of copy/pasting several humongous code blocks, if I just post a link to the specific folder on my github where the code can be found?

If the code on github is specific enough (not cluttered with other stuff) and/or you link to specific lines/blocks, sure.

I made a much simpler project just for futzing about with basic namespace.

The whole project can be understood in about five minutes.

I still can’t GET across modules.

I cloned your repo and determined it’s definitely related to namespacing. As soon as you remove the namespacing it works as intended. I haven’t really used namespacing (need to upgrade my project though!) so I don’t know exactly why it’s happening, possibly a bug? I even moved some code around to follow Vuex docs exactly and it still comes back as undefined :confused:

Well now I don’t feel so bad. :slight_smile:

On the other hand, now there’s no hope of fixing it. :neutral_face:

I also have problems getting Webstorm’s syntax highlighting to work with vuex namespacing.

Thank you for trying!

Well, if it is indeed a bug you can report it on the Vuex repo.

I hope to find some time today to look at this as well

@TwoFistedJustice Sorry for the late reply, but there’s a solution.

Your mistake was that you tried to access a namespaced getter by its non-namespaced name.

If you want to acess a getter from another namespaced module, you have to call it including the namespace - otherwise, if there where mutiple modiules with a getTheTing getter, which one did you mean?

Wrong:

rootGetters.getTheThing;

right:

rootGetters['someModule/getTheThing'];
9 Likes

I made the change in my mini-project and repo.

But it still doesn’t work when trying to call one getter from another.

Well, you just forgot to return, that’s all

1 Like

Nowwww it works!

Thank you for your patience @LinusBorg!

The basic namespace repo is now updated and fully functional!

I know this is old, but; this conversation just rescued me.
Could not get the getters working on the module ‘a’ with this (this$store.getters[‘a/sumWithRootCount’]) in a component but after looking at [TwoFistedJustice/vue-namespace-basic] sample and using

  computed: {
    ...mapGetters({
      getCount: 'a/sumWithRootCount'
    })

it worked.

const moduleA = {
  namespaced: true,
  state: {
    count: 3
  },
  mutations: {
    increment (state) {
      // `state` is the local module state
      state.count++
    }
  },

  getters: {
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  },
  actions: {
    incrementIfOddOnRootSum ({ state, commit, rootState }) {
      if ((state.count + rootState.count) % 2 === 1) {
        commit('increment')
      }
    }
  }
}

const moduleB = {
  state: {  },
  mutations: {  },
  actions: {  }
}

export default new Vuex.Store( {
  modules: {
    a: moduleA,
    b: moduleB
  },

  state: {
    count:10,
    currentActiveIndex: 0, 

Many Thanks

Hi,

just wanted to point out that in the case of @jmore it can be used without mapping the getters just by writing:

this.$store.getters['someModule/getTheThing'](payload_if_you_need_it) 

Hope this helps somebody