一、概述Redux和VueX是目前应用最广泛的前端框架状态管理方案。其中，Vuex是官方的解决方案，Redux是React社区提供的。2014年，Facebook提出了Flux架构的概念，引发了很多实现。2015年，Redux出现，将Flux与函数式编程相结合。经过数次迭代更新，已经成为React生态中最流行的解决方案。VueX是与Vue.js一起发布的状态管理工具。Vue自称是一个渐进式框架，也就是说VueX和Redux一样，可以根据自己的需要安装。它还借鉴了Flux的思想。二、核心概念比较1、Redux(1)Web应用是一个状态机，视图和状态是一一对应的。(2)所有状态都存储在一个对象中。（这两个观点来自阮一峰老师的博客，很简洁，直接拿来用。）（3）Action：同步动作，或者借助中间件进行异步操作。Action不会改变store，只是描述Howtochangethestore。(4)reducer(纯函数，根据action和oldstore计算新store。(5)store：单一数据源。(6)Redux提供store.getState()API获取store树，store.subscribe(listener)用于订阅store的变化。当store改变时，监听器会被调用；(7)Redux可以组合各个component的reducer，每个component可以单独管理自己的state，最后合并成一个reducer生成store；(8)绑定状态数据到视图：Redux将状态映射到视图，可以通过React-redux映射到React组件，当然也可以直接使用Redux提供的store.subscribe()进行订阅存储更改以更新视图，因此Redux不仅可以用于React，还可以用于Vue等其他框架；2、VueX（1）mutation（用于同步操作）（2）action（可用于异步操作，提交mutation）（3）在mutation中直接修改state（4）state（单一数据源）（5）Vuex有一个从状态派生的getter概念一些数据，比如Vue的计算属性，会在状态改变时重新计算一个结果，并提供给需要的组件。(6)Vuex使用Module的概念来划分store。和Redux一样，它可以多层嵌套子状态。(7)绑定状态数据到视图：Vuex只能用于Vue。它提供了mapState、mapAction和mapMutations等API来将存储映射到Vuex组件。这里指的是React-redux的mapStateToProps。三、使用原则Redux的使用原则：1.单一数据源（一个Redux应用只有一个store），也是一种单向数据流；2、状态是只读的（改变状态的唯一方法是触发动作，动作是一个描述有事件发生的普通对象。）；3.使用纯函数（reducer）修改状态。Vuex使用原则：应用层的状态应该集中到一个单独的store对象中。提交突变是改变状态的唯一方法，而且这个过程是同步的。所有异步逻辑都应该封装在动作中。四、异步操作（一）、Redux1。redux得益于中间件机制，使用了redux-thunk（redux-thunk可以dispatchfunction，这个函数用来生成action，所以在这个function里面我们可以进行异步操作等等，result出来之后，放到action中并用dispatch分发action，这个函数称为“actioncreator”）。2.可以把异步逻辑放在actioncreator中，通过actioncreator做一个控制反转，将dispatch作为参数传给actioncreator，这样就可以dispatchaction了，（本来dispatch是用来分发的action，现在是一个异步action，action的创建者取得控制权，调用dispatch，所以叫控制反转）。3.Redux并没有专门为异步逻辑创建一个单独的概念。它使用了Redux本身实现的中间件机制。中间件处理从分派异步操作到到达reducer的操作。在此期间，执行异步操作。得到的结果可以放在action中，然后通过dispatch分发给reducer。4.在派发动作之前，动作会立即到达reducer，所以是同步动作。现在在actioncreator中，我们可以等待异步操作的结果，然后通过控制反转生成action分布，所以称为异步action：(2)、VueXVuex使用mutation来对应Redux的action。另外，Vuex创建一个action来提交mutation，异步提交mutation，实现异步操作的结果可以达到state。说明一下，以上部分内容的出处和本人查阅期间的网络搜索也主要用于个人学习，相当于一个记事本的存在，链接的文章暂不列出。如果作者看到了，可以联系我，贴出原文链接。
