code snippets Javascript

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.

Loading...

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
// for example
rootGetters

using getters and actions

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

// using with actions
actions: {
  actionName ({ dispatch, commit, getters, rootGetters }) {
  
    rootGetters.getterName 
    rootGetters 

    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.

READ  Use Global Node Modules in Normal Nodejs App/Script

About the author

Vithal Reddy

Vithal Reddy is a seasoned technology professional with expertise in Full Stack Web development, Micro services and Scaling infrastructure on Cloud.
More at vithalreddy.com

Leave a Comment

Adblock Detected!

Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by whitelisting our website.