状态管理工具对比vuex、redux、flux

1.为什么要使用状态管路工具

 在跨层级的组件之间传递信息，尤其是复杂的组件会非常困难。也不利于开发和维护，这时我们就a需要用到状态管理工具。

 

 

2.Flux

Flux，它采用的是单向数据流。

 

 

* Actions: 驱动Dispatcher发起改变

* Dispatcher: 负责分发动作（事件）

* Store: 储存数据，处理数据

* View: 视图部分

 

 

Flux数据流的顺序是:

View发起Action  ->  Action传递到Dispatcher  ->  Dispatcher将通知Store 

 ->  Store的状态改变通知View进行改变

 

缺点：

1.一个应用可以拥有多个store，多个store直接可能有依赖关系。

2.Store封装了数据和处理数据的逻辑

 

3.Redux

Redux相对于Flux的改进：

* 把store和Dispatcher合并,结构更加简单清晰

* 新增state角色，代表每个时间点store对应的值，对状态的管理更加明确

 

 

Redux数据流的顺序是:

View调用store.dispatch发起Action  ->   

store接受Action(action传入reducer函数,reducer函数返回一个新的state)  ->  

通知store.subscribe订阅或者react-redux或者context的重新渲染函数

 

 

4.VueX

 

Vuex是专门为vue设计的，它同样基于Flux，并吸收了Redux的优点。

 

Vuex相对于Redux的不同点有:

* 改进了Redux中的Action和Reducer函数，以mutations变化函数取代Reducer，

无需switch,只需在对应的mutation函数里改变state值即可

 

* 由于Vue自动重新渲染的特性，无需订阅重新渲染函数，只要生成新的State即可

 

*vuex是响应式原理，是直接修改data，而redux不直接修改state，而返回一个新的newState。

 

*VUEX是吸收了Redux的经验，放弃了一些特性并做了一些优化，代价就是VUEX只能和VUE配合。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

Vuex数据流的顺序是:

View调用store.commit提交对应的请求到Store中对应的mutation函数  ->

store改变(vue检测到数据变化自动渲染)