新建一个store的js
引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
import VueCookies from 'vue-cookies'
Vue.use(Vuex)
定义需要使用的属性
let setLang = () => {
if (VueCookies.isKey('lang')) {
console.log('cookie' + VueCookies.get('lang'))
return VueCookies.get('lang')
} else {
return 'en-US'
}
}
const lang = setLang()
const token = ''
const state = {
token: token,
lang: lang
}
这里我为了保存网页中用户选择语言之后,防止F5刷新,又被重置了语言,所以使用了cookie
定义mutations和actions
const mutations = {
setLang (state, lang) {
state.lang = lang || 'en-US'
},
setToken (state, token) {
state.token = token || ''
}
}
const actions = {
setLang (context, param) {
context.commit('setlang', param)
},
setToken (context, param) {
context.commit('setToken', param)
}
}
定义store
const store = new Vuex.Store({
state,
mutations,
actions
})
最后
export default store
如何在组件中更新token和lang?
1.引入vuex的mapActions, mapState
import {mapActions, mapState} from 'vuex'
2.computed
computed: {
...mapState([
'lang',
‘token’
])
},
3.html中渲染lang
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<div @click="changeLang('en-US')" :class="lang==='en-US'?'acitve':' '">
<div class="lang-icon">
<el-icon v-show="lang==='en-US'" class="el-icon-caret-right"></el-icon>
</div>
English
</div>
</el-dropdown-item>
<el-dropdown-item>
<div @click="changeLang('zh-CN')" :class="lang==='zh-CN'?'acitve':' '">
<div class="lang-icon">
<el-icon v-show="lang==='zh-CN'" class="el-icon-caret-right"></el-icon>
</div>
简体中文
</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
4…methods中
changeLang (lang) {
this.$cookies.set('lang', lang)
this.$i18n.locale = lang
this.$store.commit('setLang', lang)
}