如何在 vuex 商店中存储 $i18n.locale？

Question

使用选择列表设置语言（使用 kazupon/vue-i18n 插件）：

<select v-model="$i18n.locale" class="nav__lang-switcher">
  <option v-for="(lang, i) in langs" :key="`lang${i}`" :value="lang.value">{{ lang.label }}</option>
</select>

但语言更改不会持续存在，因为它没有存储在任何地方。

这是改变语言状态的动作：

  actions: {
    changeLanguage (context) {
      context.commit('changeLanguage')
    }
  }

但是我如何从 vuex 商店访问$i18n.language？

Answer 1

您可以将this.$i18n 作为参数传递给操作

actions: {
   changeLanguage (context, payload) {
     context.commit('changeLanguage')
     payload.i18n.locale = payload.lang
   }
}

在你的组件中，有一个地方可以改变：

 onLanguageChange () {
   this.changeLanguage({ lang: this.selectedLang, i18n: this.$i18n })
 }

更多思考

您也应该将 lang 存储在 localStorage 中。如果用户硬刷新页面，我们仍然可以从本地存储加载 lang：

类似：

const LANG_KEY = 'language'

const initLang = (() => {
  let lang = window.localStorage.getItem(LANG_KEY) || window.navigator.language
  return lang || 'en'
})()

const state = {
  lang: initLang
}

const actions = {
  changeLanguage ({ commit }, payload) {
    commit('onLangChanged', payload)
  }
}

const mutations = {
  onLangChanged (state, payload) {
    window.localStorage.setItem(LANG_KEY, payload.lang)
    payload.i18n.locale = payload.lang
    state.lang = payload.lang
  }
}