How to Vuex state with a getter within a module from another module

Question

I am building a application in VueJS however Vuex modules are giving me some problems.

What ever I try I am not able to retrieve the state in a module when calling it from another module.

In my Vue Devtools Vuex getters: modA/mycustomer: is undefined

I have read all documentation at the Vuex website and tried some of the solutions already given in stackoverflow but I am lost. Probably overlooking something

my store.js

  export default new Vuex.Store({
    modules: {
      modA: moduleA,
      modB: moduleB
    }
  })

moduleA JS

  export default {
    namespaced: true,
    state:{
       customerId:0
    },
    getters: {
       customerId: state => {
          return state.customerId
       }      
    }
  }

moduleB.js

   export default {
     namespaced: true,
     state:{
       orderId:0
    },
     getters: {
       orderId: state => {
          return state.orderId
       },
       mycustomer: rootGetters => {
          return rootGetters['modA/customerId']
       }
     }
  }

I would normally expect to get the customerId with this request. But only have undefined Some states are needed across modules.

Answer 1

The relevant documentation is Accessing Global Assets in Namespaced Modules where it says:

If you want to use global state and getters, rootState and rootGetters are passed as the 3rd and 4th arguments to getter functions, and also exposed as properties on the context object passed to action functions.

So if you want to access the customerId getter of the modA module inside the mycustomer getter in the modB module, it should be:

mycustomer(state, getters, rootState, rootGetters) {
  return rootGetters['modA/customerId']
}