Vue-i18n 在 vuex 中未定义

Question

我正在尝试使用 Vue、Vuex 和 VueI18n 实施语言环境更新。我以为我找到了更新区域设置的方法，在商店对象中设置 i18n 值，然后像这样使用它（突变）：

    UPDATE_LANGUAGE: (state, newLanguage) => {
      state.language = newLanguage;
      this.$i18n.locale = state.language;
    }

但令人惊讶的是不起作用...它说 this.$i18n 未定义，但它是。

有什么想法吗？？

import store from "./store";
import EnMessages from "@/messages/en.json";
import EsMessages from "@/messages/es.json";

const i18n = new VueI18n(Vue, {
  es: EsMessages,
  en: EnMessages
});

i18n.locale = store.state.language;
store.$i18n = i18n;

Vue.http.interceptors.push((request, next) => {
  //internacionalizacion en todas las urls
  request.url = `${request.url}?lang=${store.getters["getLanguage"]}`;

  //token en todas las urls
  request.headers.set("token", store.getters["getToken"]);

  next();
});

new Vue({
  i18n,
  router,
  store,
  render: h => h(App)
}).$mount("#app");

Answer 1

将您的方法声明更改为：

UPDATE_LANGUAGE: function(state, newLanguage) {
    state.language = newLanguage;
    this.$i18n.locale = state.language;
}

原因如下：

您正在 Vue 组件内声明一个新方法。如果您使用 function 关键字来声明方法，那么 this 将引用函数的所有者，在本例中是 Vue 组件实例（这就是您想要的）。

另一方面，使用箭头函数 this 而不是 引用函数的所有者，但 this 是从其上下文中获取的。你得到一个 this 不存在的错误 - 如果它存在，它可能不是你的 Vue 组件。

Vue-i18n 在 vuex 中未定义

Vue-i18n undefined in vuex

vue.js

vuex

vue-i18n