vue 語言包通過cookie來記錄用戶更改後的操作,以便每次刷新不會重置

在這裏插入圖片描述

vuex代碼:

import Vue from 'vue'
import Vuex from 'vuex'
import VueCookies from 'vue-cookies'

function setLang () {
  if (VueCookies.isKey('lang')) {
    return VueCookies.get('lang')
  } else {
    return 'en-US'
  }
}

const lang = setLang()
Vue.use(Vuex)
const state = {
  showFooter: true,
  changableNum: 0
}

const token = ''
const store = new Vuex.Store({
  state
})

export default {
  store,
  token,
  lang
}

由於網站每次切換語種的時候,都會保存一個cookie 例如:{ lang:‘en-US’ },並且動態設置網站語言,
在這裏我引入了store.js,store裏面的lang是根據cookie來賦值的,這樣就保存了用戶的語言習慣,在刷新頁面中, VueI18n 語言管理,就會加載cookie對應的語言包,這樣就大功告成了!

import VueI18n from 'vue-i18n'
import store from './store.js'
const i18n = new VueI18n({
  locale: store.lang,
  messages: {
    'zh-CN': require('./common/lang/zh'),
    'en-US': require('./common/lang/en')
  }
})

ElementLocale.i18n((key, value) => i18n.t(key, value))

/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,
  router,
  components: {App},
  template: '<App/>'
})
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章