vuex

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

            

    

   

原文地址:https://www.cnblogs.com/kingwu/p/10081385.html