Redux 和 Vuex 的对比

一样是状态管理库，Vuex 跟 Redux 差很少，几乎与 Redux 的理念如出一辙。我的感受 Vuex 使用起来要比 Redux 简单好懂，也许是由于学了 Redux 理解 Vuex 就简单了。下面来简单对比一下二者，对比能够帮助咱们更好的学会使用他们, 没有代码。

1. 核心概念对比

Redux 的核心概念	Vuex 的核心概念
action （同步action ，或借助 中间件 实现异步操做，action 不会改变 store，只是描述了怎么改变store）	mutation（用于同步操做） 、action（可用于异步操做，提交 mutation）
reducer（纯函数，根据 action 和旧的 store 计算出新的 store	mutation里面直接修改 state
store（单一数据源）	state（单一数据源）

其余：

i） Redux 提供了 store.getState() 这个 API 获取 store 树，还有 store.subscribe(listener) 订阅 store 的变化，当 store 改变时会调用监听器；Vuex 有一个 getter 的概念用于根据 state 派生出一些数据，像 Vue 的计算属性同样，当 state 改变时会从新计算出一个结果出来，提供给须要的组件。

ii） 对于大型项目，当应用状态数据过于复杂，能够划分状态，这样便于管理数据流向。Redux 能够经过 combineReducers（）结合各个组件的 reducer，各个组件能够单独管理本身的状态，最后合并为一个 reducer 用于生成一个 store；Vuex 这方面用 Module 这个概念划分 store，与 Redux 同样，能够多层嵌套子状态。

iii） 将状态数据绑定到视图：Redux 将状态映射到视图能够经过 React-redux 映射到 React 组件， 固然也能够直接使用 Redux 本身提供的 store.subscribe() 订阅 store 的改变，从而更新视图，所以 Redux 不单单能够用于 React，也能够用于其余框架如 Vue；而 Vuex 只能用于 Vue，它提供了 mapState、mapAction、mapMutations 等API 将 store 映射到 Vuex 各个组件，这个参考了 React-redux 的 mapStateToProps。

2. 使用原则：

Redux 的三大原则：

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

Vuex 的三大原则：

a. 应用层级的状态应该集中到单个 store 对象中。
b. 提交 mutation 是更改状态的惟一方法，而且这个过程是同步的。
c. 异步逻辑都应该封装到 action 里面。
复制代码

3. 处理异步操做

Redux 得益于 中间件机制，利用 redux-thunk （redux-thunk 能够 dispatch 函数，这个函数用于生成 action，因此在这个函数里面咱们能够进行异步操做，等异步的结果出来后再放在 action 里面将这个 action 用 dispatch 分发出去, 而这个函数被叫作 “action creator” ），能够将异步逻辑放在 action creator 里面，经过 action creator 作一个控制反转， 给 action creator 传入 dispatch 做为参数，因而就能够 dispatch action，（本来是经过 dispatch 来分发 action ,如今是异步 action 即 action creator 掌握了控制权调用 dispatch，因此叫控制反转），Redux 并无创造单独的概念出来专门用于异步逻辑，它是利用了 Redux 本身实现的中间件机制，中间件从 dispatch 一个异步 action 到 action 到达 reducer 之间处理 action，在这期间经过异步操做获得的结果能够放到 action 里面再经过 dispatch 分发到 reducer，之前 dispatch 一个 action 以后，这个 action 回当即到达 reducer ，因此是同步 action，如今在 action creator 里面，咱们经过控制反转，能够等待异步操做结果再生成 action 分发，因此叫作异步 action：

而 Vuex 是用 mutation 来对应 Redux 的 action，另外 Vuex 又创造了一个 action 来提交 mutation 并经过异步提交 mutation 来实现异步操做结果可以到达 state.

（请忽略个人拙劣的画风