vuex

　　尤大大曾说过，Vuex 其实是一个针对 Vue 特化的 Flux，主要是为了配合 Vue 本身的响应式机制。当然吸取了一些 Redux 的特点，比如单状态树(用一个对象就包含了所有的应用层级状态，至此它便作为唯一数据源的存在，这也意味着没一个应用仅仅包含一个store实例，单一的状态树能够让我们直接的定位任一特定状态片段)和便于测试和热重载的 API，但是也选择性的放弃了一些在 Vue 的场景下并不契合的特性，比如强制的 immutability（在保证了每一次状态变化都能追踪的情况下强制的 immutability 带来的收益就很有限了）、为了同构而设计得较为繁琐的 API、必须依赖第三方库才能相对高效率地获得状态树的局部状态等等（相比之下 Vuex 直接用 Vue 本身的计算属性就可以）所以 Vue + Vuex 会更简洁，也不需要考虑性能问题，代价就是 Vuex 只能和 Vue 配合。Vue + Redux 也不是不可以，但是 Redux 作为一个泛用的实现和 Vue 的契合度肯定不如 Vuex。

　　在业务中，使用vue的比例是比较高的，说到vue的状态管理不得不提到vuex，vuex也是基于flux的产品，所以在某种意义上与redux想象，但又有不同。和redux使用不可变数据来表示state不同，vuex中没有render来生成全新的state来替换旧的state。Vuex中的state是可以修改的。这么做的原因和vue运行机制有关，vue是基于ES5的getter/setter来实现视图数据的双向绑定，因此，vue中的视图变更可以通过setter通知到视图中对应的指令来实现视图更新。

　　Mutation

　　　　Vuex中的state可以修改，不过修改state的方式不是通过actions，而是通过mutations，Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

　　　　不能直接调用mutation handler，需要以相应的type调用store.commit方法

　　Action

　　　　1).action可以看成是连接视图与state的桥梁，它会被视图调用，并由它来调用 mutation handler，向 mutation 传入 payload。

　　　　2).Action与mutation不同在于

　　　　 Action提交的是mutation，而不是直接变更状态，

　　　　Action中可以包含任何的异步操作

　　　　　　Action通过dispatch触发

　　　　3).在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）

Mobx and  Redux

　　前景：当我们使用react开发文本应用时，在react组件内可以通过this.setState()和this.state处理或访问组件内状态，但是随着随着项目的增大，状态变得复杂，通常考虑组件之间的通信问题：某个状态需要在多个组件共享、某组件内交互需要其他组件状态更新，对此，react组件开发实践推荐将公用组件状态提升。但是，当项目越发复杂时，我们发现仅仅是提升状态已经无法适应如此复杂的状态管理，程序状态变得比较难同步操作，这意味着我们需要更好的状态管理方式，于是引入了状态管理库，如redux、mobx、alt(基于flux使用javascript应用来管理数据的类库，简化了flux的store、actions、dispatcher)

　　Mobx

　　redux

　　相同点：

　　　　a)      统一维护管理应用状态

　　　　b)     某一状态只有一个可信数据来源-store 状态容器

　　　　c)      操作更新状态方式统一，并且可控(通常以action方式提供更新状态的途径)

　　　　d)     将react组件从业务上分为容器组件和展示型组件(视图)

　　不同点：

　　　　1.   函数式和面向对象

　　　　　　Redux 更多的是遵循函数式编程思想，而Mobx更多的是从面向对象角度考虑问题

　　　　　　Redux提倡函数式代码，如reducer就是一个纯函数.纯函数接受输入，然后输出结果，除此之外不会有任何影响，也包括不会影响接受的参数

　　　　　　Mobx更多偏向于面向对象编程和响应式编程，通常将状态包装成可观察对象(observable)，于是我们就可以使用可观察对象的所有能力，一旦所有状态对象变更，就能自动获得更新

2.   单一和多个store

　　　　　　Store是应用管理数据的地方，在Redux中，我们总是将所有共享的数据集中在一个大的store中，而Mobx则通常按模块将应用状态划分，在多个独立的store中管理

3.   Javascript对象和可观查对象

Redux以javascript原生对象形式存储数据，而Mobx使用可观察对象

Redux需要手动追踪所有状态对象的变更，

Mobx中可以监视可观察对象，当其变更时自动触发监听

4.　不可变(immutable)和可变(mutable)

　　　　　　Redux状态通常是不可变的，我们不能直接操作状态对象，而是在原来状态基础上返回一个新的状态对象，这样就能方便应用上一状态，而Mobx中直接使用新值更新状态对象　　

　　　  5.   mobx-react 和 react-redux

　　　　　　使用react和redux连接时，需要使用react-redux提供的provider和connect

　　　　　　　　　1)、Provider 负责将store注入React应用中

　　　　　　　　　2)、Connect 负责将store state注入容器组件，并选择特定的状态为容器组件props传递

　　　　　　    对于Mobx而言同样需要两个步骤：

　　　　　　　　　1.　Provider 利用mobx-react提供的provider将所有的组件注入

　　　　　　　　　2.   使用inject将特定的store注入组件，store可以传递状态或action；

　　　　　　　　　　  然后使用observer保证组件能响应store中的客观查对象observable变更，即store更新，组件视图响应式更新