如何在 store/index.js 中访问导出之外的状态？

Posted 2023-02-16

【中文标题】如何在 store/index.js 中访问导出之外的状态？

【英文标题】：How to access state outside export in store/index.js?

【发布时间】：2021-09-19 05:12:39

【问题描述】：

我在商店操作中使用 Axios，并希望根据某些状态设置 Axios 标头（以更改接受语言的请求标头）。尝试访问导出之外的商店时，我收到错误“找不到未定义的属性状态”。我的store/index.js 文件：

import Vue from "vue";
import Vuex,  Store  from "vuex";
import Axios from "axios";
Vue.use(Vuex);

Axios.defaults.headers['Accept-Language'] = store.state.Lang

const store = new Vuex.Store(
  state: 
    Lang: "en",
    ApiConf: [],
    Token: null,
    Session: null,
  
...

export default store

您将如何访问定义商店的同一文件中的商店和状态？或者你将如何在不进入商店并为每个动作定义的情况下实现这个依赖于状态的 Axios 标头？

【问题讨论】：

Axios.defaults.headers['Accept-Language'] 如果更改状态值，则不会神奇地更新

@LawrenceCherone 我忽略了这一点，但我相信我迟早会意识到这一点！谢谢

【参考方案1】：

store 在访问时未定义。 Vuex 存储通常在单独的模块中定义，因此它已经在导入它的模块中可用并且不会导致竞争条件。

另一个问题是，当Axios.defaults.headers 被分配一次存储值时，无法保留反应性，Accept-Language 将始终是初始值，除非在请求标头中指定。

这应该在 Axios 拦截器中完成：

Axios.interceptors.request.use(config => 
  config.headers['Accept-Language'] = store.state.Lang;
  return config;
);

【讨论】：

这解决了我的未定义存储问题，我忘记了 Axios 拦截器——正是我需要的！谢谢

【参考方案2】：

您的代码的问题是您在声明 store 变量之前访问它，因此出现错误。

移动线：

Axios.defaults.headers['Accept-Language'] = store.state.Lang

出口声明上方：

import Vue from "vue";
import Vuex,  Store  from "vuex";
import Axios from "axios";
Vue.use(Vuex);

const store = new Vuex.Store(
  state: 
    Lang: "en",
    ApiConf: [],
    Token: null,
    Session: null,
  
...

Axios.defaults.headers['Accept-Language'] = store.state.Lang

export default store

【讨论】：

谢谢！我之前试过这个，我没有收到错误，但我的请求标头语言没有改变。劳伦斯的评论可能会解释为什么会这样..