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

Question

我在商店操作中使用 Axios，并希望根据某些状态设置 Axios header (以更改接受语言的请求 header )。当尝试访问导出之外的存储时，我收到错误“找不到未定义的属性状态”。我的 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 header ，而无需进入商店并为每个操作进行定义？

Answer 1

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

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

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

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