状态管理：VueX与Redux

一、概览

Redux与 VueX是目前应用最广的前端框架的状态管理解决方案，其中 Vuex是官方推出的方案，而 Redux是 React社区提供的。
2014年 Facebook 提出了 Flux 架构的概念，引发了很多的实现。2015年， Redux 出现，将 Flux 与函数式编程结合一起，经过多次迭代更新，目前已经成为 React生态中的最受欢迎的解决方案。
VueX是跟随 Vue一起发布的状态管理工具， Vue自称是一个渐进式的框架，就意味着其实 VueX跟 Redux一样可以根据自己的需求来选装。它也借鉴了 Flux的思想。

二、核心概念对比

1、Redux

（1）Web 应用是一个状态机，视图与状态是一一对应的。
（2）所有的状态，保存在一个对象里面。（这两个观点是阮一峰老师的博客里讲的，很精炼，所以拿来直接用了。）
（3） action：同步action ，或借助 中间件 实现异步操作， action不会改变 store，只是描述了怎么改变 store。
（4） reducer（纯函数，根据 action 和旧的 store 计算出新的 store。
（5） store：单一数据源。
（6） Redux 提供了 store.getState() 这个 API 获取 store 树，还有 store.subscribe(listener)订阅 store 的变化，当 store 改变时会调用监听器；
（7） Redux 可以通过 combineReducers（）结合各个组件的 reducer，各个组件可以单独管理自己的状态，最后合并为一个 reducer 用于生成一个 store；
（8）将状态数据绑定到视图： Redux 将状态映射到视图可以通过 React-redux 映射到 React 组件， 当然也可以直接使用 Redux 自己提供的 store.subscribe() 订阅 store 的改变，从而更新视图，因此 Redux 不仅仅可以用于 React，也可以用于其他框架如 Vue；

2、VueX

（1） mutation（用于同步操作）
（2） action（可用于异步操作，提交 mutation）
（3） mutation里面直接修改 state
（4） state（单一数据源）
（5） Vuex 有一个 getter 的概念用于根据 state 派生出一些数据，像 Vue 的计算属性一样，当 state 改变时会重新计算出一个结果出来，提供给需要的组件。
（6） Vuex 用 Module 这个概念划分 store，与 Redux 一样，可以多层嵌套子状态。
（7）将状态数据绑定到视图： Vuex 只能用于 Vue，它提供了 mapState、 mapAction、 mapMutations 等API 将 store 映射到 Vuex 各个组件，这个参考了 React-redux 的 mapStateToProps。

三、使用原则

Redux 使用原则：

1.单一数据源（一个Redux应用只有一个store），也是单向的数据流；
2.state只读（唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。）；
3.使用纯函数（reducer）来修改state。

Vuex 使用原则：

1. 应用层级的状态应该集中到单个 store 对象中。
2. 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
3. 异步逻辑都应该封装到 action 里面。

四、异步操作

（一）、Redux
1. Redux 得益于 中间件机制，利用 redux-thunk（redux-thunk 可以 dispatch 函数，这个函数用于生成 action，所以在这个函数里面我们可以进行异步操作，等异步的结果出来后再放在 action 里面将这个 action 用 dispatch 分发出去, 而这个函数被叫做 “action creator” ）。
2. 可以将异步逻辑放在 action creator 里面，通过 action creator 做一个控制反转， 给 action creator 传入 dispatch 作为参数，于是就可以 dispatch action，（原本是通过 dispatch 来分发 action ,现在是异步 action 即 action creator 掌握了控制权调用 dispatch，所以叫控制反转）。
3. Redux 并没有创造单独的概念出来专门用于异步逻辑，它是利用了 Redux 自己实现的中间件机制，中间件从 dispatch 一个异步 action 到 action 到达 reducer 之间处理 action，在这期间通过异步操作得到的结果可以放到 action 里面再通过 dispatch 分发到 reducer。
4. 以前 dispatch 一个 action 之后，这个 action 回立即到达 reducer ，所以是同步 action，现在在 action creator 里面，我们通过控制反转，可以等待异步操作结果再生成 action 分发，所以叫做异步 action：

（二）、VueX
Vuex 是用 mutation 来对应 Redux 的 action，另外 Vuex 又创造了一个 action 来提交 mutation 并通过异步提交 mutation 来实现异步操作结果能够到达 state。

说明

以上部分内容来源与自己复习时的网络查找，也主要用于个人学习，相当于记事本的存在，暂不列举链接文章。如果有作者看到，可以联系我将原文链接贴出。