Как хранить $ i18n.locale в магазине vuex? - PullRequest
Новая
       6

Как хранить $ i18n.locale в магазине vuex?

0 голосов
/ 27 ноября 2018

Настройка языка с помощью списка выбора (с помощью плагина 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?

1 Ответ

0 голосов
/ 27 ноября 2018

Вы можете передать 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.В случае, если пользователь жестко обновляет страницу, мы все равно можем загрузить язык из локального хранилища:

Что-то вроде: 

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