在vue和react全家桶的学习中，我一直在思考哪些数据应该给vuex来管理，哪些不用，在学习Redux时看到的话
"如果你不知道是否需要 Redux，那就是不需要它。" "只有遇到 React 实在解决不了的问题，你才需要 Redux 。"
无论何时我们都要去努力降低项目的复杂度，软件的维护成本远远大于开发成本，特别是在这个遍地框架搭积木的时代。
废话不说，我目前的经验，除了全局的数据，其它的都在各自组件内完成吃喝拉撒的生命周期，我们先来学vuex的知识。
安装
$ npm install vuex --save
在项目目录新建 store 目录
新建index.js 我们暂且不会大量的使用vuex，所以创建这一个文件就行了，不用把他的核心概念拆成多个文件
上代码
import Vue from 'vue'
import Vuex from 'vuex'
import router from '@/router'
Vue.use(Vuex)
const state = {
get userinfo () {
let userinfo = JSON.parse(localStorage.getItem('userinfo'))
if (!userinfo) {
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath}
})
}
return userinfo
},
get lang () {
return localStorage.getItem('lang') || 'cn'
}
}
const actions = {
}
const getters = {
getUserinfo (state) {
return state.userinfo
}
}
const mutations = {
setUser (state, data) {
console.log(data)
localStorage.setItem('userinfo', JSON.stringify(data.userinfo))
localStorage.setItem('token', data.token)
},
setLang (state, data) {
localStorage.setItem('lang', data)
}
}
export default new Vuex.Store({
state,
getters,
actions,
mutations
})
我们用它来管理语言、用户信息和token
记得前面国际化那章吧，我们需要一个语言切换的组件
<template>
<el-select v-model="$store.state.lang" placeholder="请选择" @change="setLanguage">
<el-option :label="$t('main.lang_cn')" value="cn" />
<el-option :label="$t('main.lang_en')" value="en" />
</el-select>
</template>
<script>
export default {
methods: {
setLanguage (value) {
this.$store.commit('setLang', value)
this.$i18n.locale = value
}
}
}
</script>
通过 $store.state 去访问 通过 $store.commit 去设置
