如何在 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

如何在定义商店的同一文件中访问商店和状态？或者您将如何在不进入商店并为每个操作定义的情况下实施此 state-dependent Axios header？

Answer 1

您的代码的问题在于您在声明变量之前访问了 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

Answer 2

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

另一个问题是Axios.defaults.headers赋值一次存储值后，反应性无法保留，Accept-Language将永远是初始值，除非在请求headers中指定。

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

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

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

How to access state outside export in store/index.js?

vue.js

axios

vuex

vuejs2