深入vue-element-admin(二)之vuex

上一篇总结了语言的切换国际化，在login-index文件中，遇到了登录后的操作，接触到了vuex，这一篇就了解一下vuex吧
简单的说vuex对vue中多个组件共享的状态进行集中式的管理（读/写）

Vuex的核心

当我们在页面上点击一个按钮，它会处发(dispatch)一个action, action 随后会执行(commit)一个mutation, mutation 立即会改变state, state 改变以后,我们的页面会state 获取数据，页面发生了变化。 Store 对象，包含了我们谈到的所有内容，action, state, mutation，所以是核心了

状态管理核心状态管理有5个核心，分别是state、getter、mutation、action以及module。

1、state
state为单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在vue.js的组件中才能获取你定义的这个对象的状态。
2、getter
getter有点类似vue.js的计算属性，当我们需要从store的state中派生出一些状态，那么我们就需要使用getter，getter会接收state作为第一个参数，而且getter的返回值会根据它的依赖被缓存起来，只有getter中的依赖值（state中的某个需要派生状态的值）发生改变的时候才会被重新计算
3、mutation
更改store中state状态的唯一方法就是提交mutation，就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。
4、action
action可以提交mutation，在action中可以执行store.commit，而且action中可以有任何的异步操作。在页面中如果我们要用这个action，则需要执行store.dispatch
5、module module其实只是解决了当state中很复杂臃肿的时候，module可以将store分割成模块，每个模块中拥有自己的state、mutation、action和getter。

Vuex实例操作

只看概念的话不是很好理解，通过官网的实例分析各个环节

Vuex核心流程.png

如图，Vuex核心模块就是有颜色区域，介绍下流程：
1.state是在vuex中设置的初始值，也就是需要共享和更改的变量。通过store进行访问，虽然是计算方法，但是用法也是想属性一样访问$store.getters。
3.actions是修改state的动作，页面组件触发通过dispatch方法请求，传递给mutations。
4.mutations:是直接对state进行修改，由acitons通过commit方法提交。

实例

app.vue

store.js

import Vue from 'vue'
import vuex from 'vuex'
// vuex的核心管理模块
Vue.use(vuex)

const state = {
  count: 0
}
const mutations = {
  // 增加的mutation
  INCREMENT(state) {
    state.count++
  },
  // 减少的木塔tion
  DECREMENT() {
    state.count--
  },
  INCREMENTIFODD() {
    state.count++
  },
  INCREMENTASYNC() {
    state.count++
  }
}
const actions = {
  increment({ commit, state }, data) {
    // 增加的action
    commit('INCREMENT')
  },
  decrement({ commit, state }, data) {
    commit('DECREMENT')
  },
  // 有条件aciton  commit 和 state都是作为参数传递的
  incrementIfOdd({ commit, state }, data) {
    if (state.count % 2 === 1) {
      commit('INCREMENTIFODD')
    }
  },
  //异步action 可直接使用
  incrementAsync({ commit, state }, data) {
    setTimeout(() => {
      commit('INCREMENTASYNC')
    }, 1000)
  }
}
const getters = {
  // 对应外面组件的计算属性
  evenOrOdd(state) {
    return state.count % 2 === 0 ? '偶数' : '奇数 '
  }
}
export default new vuex.Store({
  state, //状态
  mutations, // 包含多个更新state函数的对象
  actions, //包含多个对应事件回调函数的对象
  getters //包含多个getter 计算属性函数的对象
})

文章整理自尚硅谷