How to access one Vuex state from another in Nuxt?

2
votes

I have two Vuex stores inside the Nuxt store directory. I'm not able to access one store's states from another, even through routeState.

Store 1: index.js

export const state = () => ({
    token: false
})
export const getters = {}
export const mutations = {}
export const actions = {}

Store 2: api.js

export const state = () => ({
    apiBase: 'https://myurl.com/'
})
export const getters = {
    getAPI: (state, rootState) => {
        // Need the state token from index.js here
    },
}
export const mutations = {}
export const actions = {}

Here,

  • state returns the state variables in api.js, that is apiBase
  • routeState returns the getters in api.js
  • this is undefined inside Vuex getters, it doesn't work

How do I access the state or getters from index.js?

1
javascriptvue.jsvuexnuxt.js

1 Answers

2
votes

The rootState is exposed ad the third argument into a getter.

const getters = {
  getApi: (state, getters, rootState) => {
    // Access the state token from index.js
    rootState.token
 }}

Check this page for more details Vuex Docs