如何从模块访问 Vuex 基本状态

Question

我在 Vuex 中成功创建了一个组，但是我如何从组访问到基本/非组状态？在这种情况下，我想从产品组的基本/非组状态中的状态访问用户令牌。

这是我的产品组

const product = {
  state: () => ({
    product: [

    ]
  }),
  mutations: {
    retreiveProduct(state,product){
      state.product = product
    },
  },
  actions: {
    retreiveProduct(context){
      axios.defaults.headers.common['Authorization'] = 'Bearer ' + context.state.token
      axios.get('/products')
        .then(response=>{
          context.commit('retreiveProduct',response.data)
        })
        .catch(error => {console.log(error)})
    },
  },
  getters: {

  }
}

上面代码中从“context.state.token”获取token时出错

这是我的用户令牌代码

export const store = new Vuex.Store({
  modules: {
    product
  },
  state:{
    token: localStorage.getItem('access_token') || null,
    filter: 'all',
  },
})

如果你看到了，我已经声明了一个变量标记并用access_token 填充它。我可以从产品组中调用此变量，还是必须在产品组中创建另一个令牌变量？

还是我必须让其他组保留令牌？

这可以通过命名空间解决吗？

Answer 1

由于操作在 Vuex 模块中，并且您正在访问的状态是在 Vuex 存储根而不是模块的状态中，因此您需要从 context 对象而不是 state 访问 rootState：

axios.defaults.headers.common['Authorization'] = 'Bearer ' + context.rootState.token

context 对象有：

• state
• rootState
• getters
• rootGetters
• commit
• dispatch