时间戳

首页 > 解决方案 > 如何在 vuex 商店中存储 $i18n.locale？

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

问题描述

使用选择列表设置语言（使用 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')
    }
  }

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

标签： vue.jsinternationalizationvuex

解决方案

您可以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
  }
}

推荐阅读