Access getter from another vuex module

In this tutorial, we are going to learn about how to access the getter from another module Vue And Vuex.

Consider you are building and frontend web app using Vuejs framework and for state management, default and popular choice will be Vuex.

for some reason you want to access the getter from another module, you can use the following method to do so.

Also checkout, 5 ways to shuffle an array using javascript ES6

using rootGetters

According to official documention https://vuex.vuejs.org/en/api.html we can pass rootGetters as 4th parameter in our function:

pages: (state, getters, rootState, rootGetters) => {
               //here we can access all other modules 
              // using rootGetters.moduleName
}

and for namespaced we can access using

rootGetters["moduleName/getter"]
// for example
rootGetters["users/link"]

using getters and actions

// using with getters
getters: {
    someGetter (state, getters, rootState, rootGetters) {
        // rootGetters.getterName
        // rootGetters['namesapce/getterName'] 
    }
}

// using with actions
actions: {
  actionName ({ dispatch, commit, getters, rootGetters }) {
  
    rootGetters.getterName 
    rootGetters['foo/bar'] 

    dispatch('foobar') 
    dispatch('lorem', null, { root: true }) 

    commit('ipsuum') 
    commit('mutationName', null, { root: true }) 
  }
}

In this way, we can access getter of another module in Vuex.