Vuex中未定义的Vue-i18n [重复]

Question

我正在尝试使用 Vue、Vuex 和 VueI18n 实现语言环境更新。我想我找到了更新区域设置的方法，在 store 对象中设置 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 组件。