redux与vuex异同以及使用

Vue是一套用于构建用户界面的渐进式框架,React是一个用于构建用户界面的JavaScript库

Redux 和 Vuex区别

Vuex改进了Redux中的Action和Reducer函数，以mutations变化函数取代Reducer，无需switch，只需在对应的mutation函数里改变state值即可 Vuex由于Vue自动重新渲染的特性，无需订阅重新渲染函数，只要生成新的State即可 Vuex数据流的顺序是∶View调用store.commit提交对应的请求到Store中对应的mutation函数->store改变（vue检测到数据变化自动渲染） 通俗点理解就是，vuex 弱化 dispatch，通过commit进行 store状态的一次更变；取消了action概念，不必传入特定的 action形式进行指定变更；弱化reducer，基于commit参数直接对数据进行转变，使得框架更加简易;

\2. 共同思想 单—的数据源 变化可以预测 本质上∶ redux与vuex都是对mvvm思想的服务，将数据从视图中抽离的一种方案。 vuex 和 redux 都是状态管理库，用于单独管理状态的。其中，redux是一个范用的库，可以单独使用。而vuex是专门用来配合vue使用的。他们都应用了flux架构的思想，但是在接口的提供上稍有不同。

3.核心概念对比 Redux 的核心概念

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

mutation（用于同步操作） 、action（可用于异步操作，提交 mutation） mutation里面直接修改 state state（单一数据源） \4. 使用原则： Redux 的三大原则：

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

view——>action——>store——>reducer（返回）——>store——view

Vuex 的三大原则：

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

vueComponent——>(dispatch)action——>（commit）——>mutations——>（mutate）state——>（render）vueComponent

\5. 处理异步操作 Redux 的中间件机制，利用 redux-thunk ，redux-thunk可以dispatch函数，这个函数用于生成action，所以在这个函数里我们可以进行异步操作，等异步的结果出来后再放在action里面，将这个action用dispatch分发出去，而这个函数被叫做 “action creator”，可以将异步逻辑放在 action creator 里面，给 action creator 传入 dispatch 作为参数，于是就可以 dispatch action，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.