Vue-i18n이 vuex에 정의되어 있지 않습니다.

Vue-i18n이 vuex에 정의되어 있지 않습니다.

이 질문에는 이미 답변이 있습니다.

계산된 vue에서 화살표 사용 기능이 작동하지 않음 (6개의 답변)

닫힘2년 전에요.

Vue, Vuex 및 VueI18n을 사용하여 로케일 업데이트를 구현하려고 합니다.스토어 오브젝트의 i18n 값을 설정하고 다음과 같이 로케일을 갱신하는 방법을 찾았습니다(변환).

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

근데 의외로 안 먹히는데...이렇게 써있어요.$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");

메서드 선언을 다음으로 변경합니다.

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

그 이유는 다음과 같습니다.

Vue 구성 요소 내에서 새 메서드를 선언합니다.를 사용하고 있는 경우function키워드를 지정하여 메서드를 선언합니다.this는 함수의 소유자(이 경우 Vue 컴포넌트 인스턴스)를 나타냅니다.

반면 화살표 기능 사용this함수의 소유자를 나타내는 것은 아니지만this는 컨텍스트에서 가져옵니다.라고 하는 에러가 표시됩니다.this존재하지 않습니다.존재한다면 Vue 컴포넌트는 아닐 것입니다.

언급URL : https://stackoverflow.com/questions/57749437/vue-i18n-undefined-in-vuex