为什么要单独增加Vuex？
- 因为Vuex里面涉及很多概念性的东西，一时之间弄不懂，当时我在项目中集成Vuex时查了很多资料，踩了不少的坑。如果刚开始接触Vuex，你肯定会从官方文档看起，官方给的例子，就是加一减一的例子，你会发现，Vuex好复杂啊，本来可以一步完成的事，为什么要那么多步，而且还搞不清楚每步和每步是什么关系，蒙了。而且他的例子只针对简单的业务场景，对于生产环境（多component的环境），发现根本就是适用，下面让我来一一道来
Vuex解决了什么问题？
- 刚开始上项目时，我也没打算用Vuex，因为感觉那玩意没啥用，太复杂。后来一边做，一边就发现一个比较难解决的问题：兄弟组件间通信的问题！
如果不用Vuex，怎么做？
- 我相信，不用Vuex也可以解决，解决方案是：Root组件做为中转站，兄弟组件1向Root组件$broadcast，Root组件收到之后，再$dispatch，兄弟组件2从Root组件拿到数据，然后做业务处理，数据从树根到树顶，再到树根。
这样会带来什么问题？
- 可维护性会下降，你要想修改数据，你得维护三个地方
- 可读性会下降，因为一个组件里的数据，你根本就看不出来是从哪来的
- 增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。
是所有项目都用Vuex么？
- 凡是兄弟组件有大量通信的，建议一定要用，不管大项目和小项目，因为这样会省很多事。
从哪里开始？
- 在这里咱们先不谈Vuex的里面的几个概念，想看，官方上有，刚上来就提这么，效果也不好。咱们先从一个简单的实例开始。
什么例子？
- 咱们假设在A.vue里面通过Ajax取来数据，然后做展示，这个简单吧，咱们用Vuex来看看怎么搞。如果不用Vuex，我们取完数据会放到Data里面，然后拿到数据做v-for渲染，像这样
1 ...
2 mounted() {
3 Vue.axios.get(‘http://localhost:5000/data‘).then((response) => {
4 const list = response.data.data.liveWodList
5 this.newList = list
6 })
7 }
8 ...
如果用Vuex呢？
- 显然他不在你的A.vue里面，所以你得告诉他，来数据了，快收一下，怎么通知呢，这就涉及到Vuex的第一个操作：
commit。这里这个操作，对应Vuex的核心概念之一：Mutations（变化）！他的作用就是通知Vuex要搞事情了，比如删除数据、增加数据等，代码是这样的this.$store.commit(‘setData‘, list)，这个有两个参数，第一个参数是要搞的事情，第二个参数是具体的数据。
数据存哪了？
- 你的数据是来了，我得有地来接收数据吧，接收数据的地对应Vuex的核心概念之二
State（状态），就是所有需要变化的东西都存在我这。代码是这样的：
1 function setData(state, data) {
2 state.list = data
3 }
怎么拿到数据？
- 有放肯定有取啊，数据存在
State，取也是从这里取。取数据就对应Vuex的核心概念之三Getters，代码是这样的的：
1 const getters = {
2 list: state => state.list
3 }
目录结构
1 store
2 |____modules
3 | |____list.js
4 |____mutation-types.js
5 |____store_index.js
这个目录结构有什么好处？
- 这是Vuex在真正项目中用到的，分模块，每个模块一个文件（modules），首先我们看下
store/mutation-types.js。这个文件的结构比较简单，代码如下：
1 export const LIST = {
2 GET_DATA: ‘getData‘,
3 ADD_DATA: ‘addData‘
4 }
- 功能是：定义常量。常量的作用不用细说，防止手写写错。实际开发中，应该是每一个模块一个常量，现在只有一个
LIST，未来可能会多增加NEWS/USER等，也是一个模块，一个常量对象。
- 再看
modules/list.js，代码如下：
1 import {
2 LIST
3 } from ‘../mutation-types‘
4
5 const state = {
6 list: []
7 }
8
9 const mutations = {
10 [LIST.GET_DATA](state, data) {
11 state.list = data
12 }
13 }
14 const getters = {
15 list: state => state.list
16 }
- 这里面就有对应的三个概念
state/mutations/getters，可以和我上面说的对比一下，现在看代码，应该很清晰了。注意：里面有很多ES6的语法，不明白的可以查一查。
store/store-index.js为入口文件，里面主要是引入各配置，供Vue使用。注意：这个文件的引入是在src/index.js里面！
流程图
好像还缺一个？
- 对，还缺一个
Action，为什么没提这个Action，按我的理解，Action这一层应该是在多个操作中有价值，比如有一个预约按钮，点击之后，会更新几个Component的状态。现实开发中，基本上都是点击按钮，触发一个事件，那增加Action就会增加整个流程的链路，增加复杂度。
码上点我（Github）
