Как остановить возврат i18n к локали по умолчанию при перезагрузке страницы на Vue?

Question

Я использую i18n для перевода своего приложения на Vue. Я создал имя компонента LocaleChanger, чтобы позволить пользователю изменять язык приложения. Я использую его в двух разных местах: на странице входа в систему и на странице панели инструментов.

Язык локали по умолчанию - испанский sh. Я на странице входа в систему, и я меняю язык на Engli sh и авторизируюсь, а pu sh на приборной панели. Язык остается английский sh. Но если я перезагрузлю страницу, язык изменится на испанский sh. Как я могу предотвратить это?

Это мой компонент

<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("language", 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.appLanguage,
  messages,
})

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