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;
});