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

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

1 个答案: