[Nuxt，i18n，Vuex]：如何从商店getter访问this.$i18n.locales

Question

我正在使用Nuxtv2.15和@nuxtjs/i18nv7.2构建一个web应用程序。我在用Vuex进行国家管理。在我的全局状态中，我希望创建一个基于this.$i18n.locale返回值的getter。

在我的Vuex方法中，访问带有$i18n的当前应用程序上下文的最佳方法是什么？

nuxt.config.js

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.js

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 } };
  },
};

components/login.vue

<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>

我所期望的

我希望能够从Vuex getter访问this.$i18n，或者有一些方法这样做。

实际发生了什么

在getter方法中，this未定义。

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

我试过什么

我看到这里将一个getter传递给四个参数：state、getters、rootState和rootGetters。

我试过：

• Vuex 状态、吸气器和Nuxt i18n的RTFM
• 访问state.$i18n
• 将$i18n: this.$i18n添加到根状态

Answer 1

上周，我遇到了一个类似的问题，我绝对需要在vuex吸气器中使用i18n。

我不推荐它，因为它可能不是世界上最具表现力的东西，但它对我起了作用，并在我处理政府申请时解决了一个巨大的问题。

components/login.vue

<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.js

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 } };
  },
};

Answer 2

在深入研究文档、进行实验并与在这里提供答案的人进行讨论之后，很明显，i18n并不能在Vuex getter方法中直接访问，尽管@nuxt/i18n注册Vuex模块调用了i18n，我所读到的关于Vuex模的所有内容都表明这是可能的。

但是，我确实遇到了@nuxt/i18n回调的文档，这导致我创建了一个小的插件，它使用突变在全局状态中设置locale和uiLocales的值。

最终结果如下：

nuxt.config.js

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 */ },
    },
  },
};

plugins/i18n.js

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.js

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

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

components/login.vue

<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>

Answer 3

您可以使用：this.app.i18n.locale访问Vuex操作中的区域设置。

这不能在state或getter中访问(无论如何，getter不是它的一个位置)。

PS:上面的意思是，这意味着您可以在任何可以访问Nuxt上下文的地方访问这个值。