上一篇总结了语言的切换国际化，在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

实例

app.vue

<template>
  <div id="app">
    <p>click {{$store.state.count}} times count is {{evenOrOdd}}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">increment if odd</button>
    <button @click="incrementAsync">increment async</button>
  </div>
</template>
<script>
export default {
  //计算属性
  computed: {
    evenOrOdd() {
      return this.$store.getters.evenOrOdd;
    }
  },
  methods: {
    // 增加
    increment() {
      //   const count = this.count;
      //   this.count = count + 1;
      this.$store.dispatch("increment");
    },
    decrement() {
      this.$store.dispatch("decrement");
      //   const count = this.count;
      //   this.count = count - 1;
    },
    // 如果是奇数就加1
    incrementIfOdd() {
      this.$store.dispatch("incrementIfOdd");
      //   const count = this.count;
      //   if (count % 2 === 1) {
      //     this.count = count + 1;
      //   }
    },
    incrementAsync() {
      this.$store.dispatch("incrementAsync");
      //   setTimeout(() => {
      //     const count = this.count;
      //     this.count = count + 1;
      //   }, 1000);
    }
  }
};
</script>

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 计算属性函数的对象
})

文章整理自尚硅谷