[Nuxt, i18n, Vuex] :접속 방법스토어게터로부터의 $i18n.locales

[Nuxt, i18n, Vuex] :접속 방법스토어게터로부터의 $i18n.locales

Nuxt v2.15와 @nuxtjs/i18n v7.2를 사용하여 웹 앱을 구축하고 있습니다.상태 관리를 위해 Vuex를 사용하고 있습니다.글로벌 상태에서는 다음을 기준으로 값을 반환하는 getter를 만들고 싶다.this.$i18n.locale.

현재 앱 컨텍스트에 액세스하는 가장 좋은 방법은 무엇입니까?$i18n내 Vuex getter 메서드로 연결할 수 있습니까?

nuxt.config.config.syslog

export default {
  modules: [
    "@nuxtjs/i18n", // https://i18n.nuxtjs.org/
  ],
  i18n: {
    locales: { /* configuration */ },
    defaultLocale: "en",
    detectBrowserLanguage: {
      fallbackLocale: "en",
      redirectOn: "root",
    },
    langDir: "~/locales/",
    vueI18n: {
      fallbackLocale: "en",
      messages: { /* translation data */ },
    },
  },
};

store/index.displaces

export const state = () => ({
  // Root module for Vuex store: https://nuxtjs.org/docs/directory-structure/store/
});

export const getters = {
  loginOpts() {
    const locale = this.$i18n.locale;
    const uiLocales = [locale];
    if (locale === "zh") {
      uiLocales.push("zh-CN");
    }
    return { params: { ui_locales: uiLocales } };
  },
};

컴포넌트 / 컴포넌트표시하다

<template>
  <div>
    <v-btn v-if="$auth.loggedIn" @click="$auth.logout()">Sign Out</v-btn>
    <v-btn v-else @click="$auth.loginWith('auth0', $store.getters.loginOpts)">Sign In</v-btn>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Login",
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["loginOpts"]),
  },
};
</script>

내가 기대하는 것

이 웹 사이트에 접속할 수 있을 것으로 예상합니다.this.$i18nVuex getter에서 또는 Vuex getter를 사용할 수 있습니다.

실제로 일어나는 일

게터 방식에서는this정의되어 있지 않습니다.

TypeError: Cannot read properties of undefined (reading '$i18n')

내가 시도한 것

여기서 getter는 4개의 인수를 통과합니다.state,getters,rootState,그리고.rootGetters.

시도했습니다.

• Vuex State, Getters 및 Nuxt i18n용 RTFM
• 액세스state.$i18n
• 추가$i18n: this.$i18n뿌리까지

여기서 친절하게 답을 제시해준 사람들과 문서를 뒤지고, 실험하고, 토론한 결과, 분명합니다.i18nVuex getter 메서드에서는 직접 액세스할 수 없습니다.@nux/i18n은 Vuex 모듈을 등록하지만i18nVuex 모듈에 대해 읽은 내용을 보면 이것이 가능할 것으로 생각됩니다.

그러나 @nuxt/i18n 콜백에 대한 문서를 발견했고, 그 결과 작은 플러그인이 생성되어 다음과 같은 값을 설정하게 되었습니다.locale그리고.uiLocales변이를 사용하여 글로벌 상태로 이행합니다.

최종 결과는 다음과 같습니다.

nuxt.config.config.syslog

export default {
  modules: [
    "@nuxtjs/i18n", // https://i18n.nuxtjs.org/
  ],
  plugins: [
    "~/plugins/i18n.js",
  ],
  i18n: {
    locales: { /* configuration */ },
    defaultLocale: "en",
    detectBrowserLanguage: {
      fallbackLocale: "en",
      redirectOn: "root",
    },
    langDir: "~/locales/",
    vueI18n: {
      fallbackLocale: "en",
      messages: { /* translation data */ },
    },
  },
};

플러그인/i18n.displus

export function findLocaleConfig (i18n, locale) {
  return (
    i18n.locales.find(({ iso, code }) => [iso, code].includes(locale)) || {}
  );
}

export default function ({ app }) {
  app.store.commit("localeChange", findLocaleConfig(app.i18n, app.i18n.locale));

  app.i18n.onLanguageSwitched = (oldLocale, newLocale) => {
    app.store.commit("localeChange", findLocaleConfig(app.i18n, newLocale));
  };
}

store/index.displaces

export const state = () => ({
  locale: null,
  uiLocales: [],
});

export const mutations = {
  localeChange(state, locale) {
    state.locale = locale.code;
    state.uiLocales = [locale.code, locale.iso];
  },
};

컴포넌트 / 컴포넌트표시하다

<template>
  <div>
    <v-btn v-if="$auth.loggedIn" @click="$auth.logout()">Sign Out</v-btn>
    <v-btn v-else @click="$auth.loginWith('auth0', loginOpts)">Sign In</v-btn>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {};
  },
  computed: {
    loginOpts() {
      const uiLocales = this.$store.state.uiLocales;
      return { params: { ui_locales: uiLocales } };
    },
  },
};
</script>

Vuex 작업의 로케일에 액세스할 수 있는 방법은 다음과 같습니다.this.app.i18n.locale.
이것은, 에서 액세스 할 수 없습니다.state또는getter(어쨌든 IMO는 getter를 위한 장소가 아닙니다).

PS: 위의 내용은 Nuxt 컨텍스트에 액세스할 수 있는 모든 장소에서 이 값에 액세스할 수 있음을 의미합니다.

지난주에도 vuex getter에서 i18n을 사용해야 하는 비슷한 문제가 있었습니다.

세계에서 가장 성능이 좋은 것은 아닐지도 모르기 때문에 추천하고 싶지는 않지만, 정부 애플리케이션 작업 중에 큰 문제를 해결했습니다.

컴포넌트 / 컴포넌트표시하다

<template>
  <div>
    <v-btn v-if="$auth.loggedIn" @click="$auth.logout()">Sign Out</v-btn>
    <v-btn v-else @click="$auth.loginWith('auth0', theLoginOpts)">Sign In</v-btn>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Login",
  data() {
    return {
        theLoginOpts: $store.getters.loginOpts(this) // The secret sauce
    };
  },
  computed: {
    ...mapGetters(["loginOpts"]),
  },
};
</script>

store/index.displaces

export const state = () => ({
  // Root module for Vuex store: https://nuxtjs.org/docs/directory-structure/store/
});

export const getters = {
  loginOpts: (state) => (app) => { // App is the secret sauce from earlier
    const locale = app.$i18n.locale;
    const uiLocales = [locale];
    if (locale === "zh") {
      uiLocales.push("zh-CN");
    }
    return { params: { ui_locales: uiLocales } };
  },
};

언급URL : https://stackoverflow.com/questions/70911055/nuxt-i18n-vuex-how-to-access-this-i18n-locales-from-store-getter