引入 vuex 管理状态

在vue和react全家桶的学习中，我一直在思考哪些数据应该给vuex来管理，哪些不用，在学习Redux时看到的话

"如果你不知道是否需要 Redux，那就是不需要它。" "只有遇到 React 实在解决不了的问题，你才需要 Redux 。"

无论何时我们都要去努力降低项目的复杂度，软件的维护成本远远大于开发成本，特别是在这个遍地框架搭积木的时代。

废话不说，我目前的经验，除了全局的数据，其它的都在各自组件内完成吃喝拉撒的生命周期，我们先来学vuex的知识。

安装

$ npm install vuex --save

新建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 去设置

引入 vuex 管理状态

推荐阅读更多精彩内容