1、原理
vuex为Vue components提供了一个完整的生态圈。
Vue components是vue的组件，组件会触发dispatch一些事件或者动作，也就是图中的Actions
组件触发事件或者动作肯定是先获取数据，但是在vuex中数据是集中式管理的，所以想要获取数据或者改变数据，需要提交commit到Mutations
只有Mutations可以改变state中数据
当数据改变后，就会重新渲染Render到Vue components，组件展示更新后的数据，完成一个完整的流程
2、总结
vuex实现单向数据流，【vueComponent】 通过$store.disaptch('事件名'，data)触发【Actions】，然后通过$store.commit() 触发【mutation】，最后更新【state】
3、底层分析
（1）vuex通过全局注入store对象的方式，来实现状态共享，store是怎么挂载注入到组件中的？
store通过vue的mixin混入机制，在vue的beforeCreate钩子函数之前混入vuexinit()方法；vueinit()方法实现将store对象注入vue组件实例中，并注册了store的引用属性$store。
（2）vuex的state和getters是怎么映射到组件中来响应式的更新状态的？
state是利用vue的data响应式，将store的state存入vue实例组件的data中；Vuex的getters是借助vue的computed属性实现数据的实时监听。
4、5种属性
vuex有五种属性，分别是 State、 Getter、Mutation 、Action、 Module
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
5、action和mutation的区别
1.流程顺序
相应视图—>修改State 拆分成了2部分，先执行action在执行mutations
2.角色定位
mutations 专注state的更改，是修改state的唯一途径 action 主要进行业务处理，异步请求
3.限制
mutations 只能同步 action 可异步可同步
4.补充
Action的方法里面可以写Ajax Mutation里面不能写Ajax
6、vuex和localStorage的区别
1.存储位置
vuex存储在内存中 localStorage存储在硬盘中 读取内存的速度要比读取硬盘的速度快很多
2.应用场景
vuex是vue的状态管理器，vuex用于组件间的传值 localStorage是本地存储，是将数据存储到浏览器的一种方式，一般在跨页面传递数据时使用 vuex能够做到数据响应式，localStorage做不到
3.永久性
刷新界面，vuex的数据会丢失，localStorage不会
7、为什么mutation不能异步
Vuex中所有的状态更新的唯一途径都是mutation，异步操作通过 Action 来提交 mutation实现，这样可以方便地跟踪每一个状态的变化，从而能够实现一些工具帮助更好地了解我们的应用。
每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。
