如何阻止 i18n 在 Vue 上重新加载页面时恢复为默认语言环境？

Question

我正在使用 i18n 在 Vue 上翻译我的应用程序。我创建了一个组件名称 LocaleChanger 来允许用户更改应用程序语言。我在两个不同的地方使用它：登录页面和仪表板页面。

默认区域设置语言是西班牙语。我在登录页面，将语言更改为英语，然后登录并推送到仪表板。语言仍然是英语。但如果我重新加载页面，语言就会更改为西班牙语。我怎样才能阻止这种情况发生？

这是我的组件

<template>
  <v-menu offset-y>
      <template v-slot:activator="{ on }">
        <v-btn class="transparent" rounded outlined v-on="on">
          <v-icon class="pr-3">mdi-web</v-icon> 
           {{  $store.getters.getAppLanguage }}
          <v-icon class="pl-3">mdi-menu-down</v-icon> 
        </v-btn>
      </template>

      <v-list>
        <v-list-item-group>
          <v-list-item
            v-for="(item, i) in items"
            :key="i"
            @click="setLanguage(item)"
          >
            <v-list-item-content class="text-center">
              <v-list-item-title v-text="item.text"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-menu>
</template>

<script>
export default {
  name: 'LocaleChanger',
  data () {
    return {
      selectedLanguage: this.$store.getters.getAppLanguage,
      items: [
        {
          text: 'ES',
        },
        {
          text: 'EN',
        },
      ],
    }
  },
  methods: {
    // Set local i18n language acording to the language user has selected 
    setLanguage (item) {
      if (item.text == 'ES') {
        i18n.locale = 'es'
        this.$store.commit('setAppLanguage', 'ES')
      } else if (item.text == 'EN') {
        i18n.locale = 'en'
        this.$store.commit('setAppLanguage', 'EN')     
      }
    },
  },
}
</script>

还有这个 i18n.js

Vue.use(VueI18n)

const messages = {
  en: {
    ...require('@/locales/en.json'),
    $vuetify: en,
  },
  es: {
    ...require('@/locales/es.json'),
    $vuetify: es,
  },
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'es',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages,
})

Answer 1

您可以用来localstorage保存信息。

在您的商店中尝试appLanguage从localStorage.

export default new Vuex.Store({
  state: {
    appLanguage: localStorage.getItem("appLanguage") || process.env.VUE_APP_I18N_LOCALE || 'es'
  },
  getters: {
    getAppLanguage: (state) => state.appLanguage
  },
  mutations: {
    setAppLanguage(state, language) {
      state.appLanguage = language;
      localStorage.setItem("appLanguage", language); // Whenever we change the appLanguage we save it to the localStorage
    }
  }
})

然后localStorage使用商店中的值进行初始化。

import store  from "./store.js";

export default new VueI18n({
  locale: store.getters.getAppLanguage,
  messages,
})

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage