Vue i18n 区域设置更改未立即反映在所有组件中

Question

我正在使用 **Vue ** 开发一个 Web 应用程序，并且我正在使用 vueI18n 进行国际化。我遇到了一个问题，区域设置更改没有立即反映在所有组件中。

相关详情如下：

申请详情：

• 框架：Vue
• package.json中指定的Vue版本：^3.2.13
• 需要注意的重要软件包：vueI18n

问题详情： 我在两个组件中使用 vueI18n（

MyHeader.vue

和

HomeView.vue

）。以下是相关代码片段：

MyHeader.vue

：

<div class="my-header">
    <ul>
      <router-link to="/">
        <li
          @mousedown="
            home.click = true;
            select('home');
          "
          @mouseup="home.click = false"
          class="home"
          :class="{ click: home.click, selected: home.selected }"
        >
          {{ $t("nav.home") }}
        </li>
      </router-link>
  ...
</div>

HomeView.vue

：

<div class="grid">
      <img src="../assets/placeholder.jpg" :alt="$t('home.imgAlt')" />

      <div class="profile">
        <h2>{{ $t("home.profileH2") }}</h2>

        <p>{{ $t("home.profileP1") }}</p>

        <p>{{ $t("home.profileP2") }}</p>
      </div>
  ...
</div>

在

HomeView.vue

中，我有一个按钮，单击时可以更改

this.$i18n.locale

的值：

<button><img @click="changeLocale()" :src="require(`../assets/${locale}.png`)"></button>

以及按钮的脚本：

changeLocale() {
      if (this.locale === "ES") {
        this.locale = "EN";
        this.$i18n.locale = "es";
      } else {
        this.locale = "ES";
        this.$root.$i18n.locale = "en";
      }
}

这是

main.js

中的i18n配置：

const app = createApp(App);

const i18n = createI18n({
  locale: "en",
  messages: {
    en: require("./locales/en.json"),
    es: require("./locales/es.json"),
  },
});

app
  .component("myHeader", myHeader)
  .use(router)
  .use(i18n)
  .mount("#app");

当我单击按钮更改区域设置时出现问题。区域设置发生变化，因此

HomeView.vue

中的语言会根据区域设置的 JSON 文件中指定的内容发生变化。但是，在

MyHeader.vue

组件中，链接的语言在我单击每个链接之前不会更改。

我尝试通过 this.$root.$i18n.locale 更改根区域设置，但没有成功。我不想使用 Vuex 之类的方式来通信组件，因为据我了解 i18n，我不应该这样做。 VueI18n 应该帮我做吧？

提前谢谢您！

Answer 1

因此，在制作一个小的可重现代码示例时，我更改了用于将

this.$i18n.locale

的值更新为更紧凑版本的方法，并且它起作用了。我仍然不知道为什么它有效，但它确实有效。

以前的方法：

methods: {
    changeLocale() {
      if (this.locale === "ES") {
        this.locale = "EN";
        this.$i18n.locale = "es";
      } else {
        this.locale = "ES";
        this.$root.$i18n.locale = "en";
      }
    }
  },

更新方法：

methods: {
    changeLocale() {
      this.$i18n.locale = this.$i18n.locale === "en" ? "es" : "en";

      if (this.$i18n.locale == "en")
        this.locale = "ES";
      else
        this.locale = "EN";
    }
  },