vuex - redux - mobx

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更新，组件视图响应式更新