本文是对 Flux、Redux、Vuex 几种常用状态管理模式的总结，偏向于概念层面，不涉及过多代码。
什么是状态管理？
状态管理就是，把组件之间需要共享的状态抽取出来，遵循特定的约定，统一来管理，让状态的变化可以预测。

为什么需要状态管理？
状态共享：
组件之间通常会有一些共享的状态，在 Vue 或者 React 中我们一般会将这部分状态提升至公共父组件的 props 中，由父组件来统一管理共享的状态，状态的改变也是由父组件执行并向下传递。
变化跟踪：
在应用调试过程中，可能会有跟踪状态变化过程的需求，方便对某些应用场景的复现和回溯。这时候就需要统一对状态进行管理，并遵循特定的约定去变更状态，从而让状态的变化可预测。
Store 模式：
Store 模式是一种相对简单的状态管理模式，一般有以下约定：
状态存储在外部变量 store 里（也可以是全局变量）
store 中的 state 用于存储数据，由 store 实例维护
store 中的 actions 封装了改变 state 的逻辑
如果对 state 的变更均通过 actions，那么实现记录变更、保存快照、历史回滚就会很简单，但是 Store 模式并没有对此进行强制约束。

Flux
Flux 是一种架构思想，类似于 MVC 、MVVM 等。
Flux 的组成：
View：视图层
Action：动作，即数据改变的消息对象（可通过事件触发、测试用例触发等）
Store 的改变只能通过 Action，具体 Action 的处理逻辑一般放在 Store 里
Action 对象包含 type （类型）与 payload （传递参数）
Dispatcher：派发器，接收 Actions ，发给所有的 Store
Store：数据层，存放应用状态与更新状态的方法，一旦发生变动，就提醒 Views 更新页面
Flux 的特点：
单向数据流。视图事件或者外部测试用例发出 Action ，经由 Dispatcher 派发给 Store ，Store 会触发相应的方法更新数据、更新视图
Store 可以有多个
Store 不仅存放数据，还封装了处理数据的方法

Redux
Redux 的组成：
Store：存储应用的状态 -- state 以及用于触发 state 更新的 dispatch 方法等，整个应用仅有单一的 Store。Store 中提供了几个管理 state 的 API：
store.getState()：获取当前 state
store.dispatch(action)：触发 state 改变（唯一途径）
store.subscribe(listener)：设置 state 变化的监听函数（若把视图更新函数作为 listener 传入，则可触发视图自动渲染）
Action：同 Flux ，Action 是用于更新 state 的消息对象，由 View 发出
有专门生成 Action 的 Action Creator，其本质上是一个返回 Action 对象的函数
Reducer：是一个根据 action.type 更新 state 并返回 nextState 替换原来的 state 的同步的纯函数（对于相同的参数返回相同的返回结果，不修改参数，不依赖外部变量）。即通过应用状态与 Action 推导出新的 state：(previousState, action) => newState。Reducer 返回一个新的 state
Redux 的特点：
单向数据流。View 发出 Action (store.dispatch(action))，Store 调用 Reducer 计算出新的 state ，若 state 产生变化，则调用监听函数重新渲染 View （store.subscribe(render)）
单一数据源，只有一个 Store
state 是只读的，每次状态更新之后只能返回一个新的 state
没有 Dispatcher ，而是在 Store 中集成了 dispatch 方法，store.dispatch() 是 View 发出 Action 的唯一途径
支持使用中间件（Middleware）管理异步数据流

Vuex
Vuex 的核心概念：
Store：Vuex 采用单一状态树，每个应用仅有一个 Store 实例，在该实例下包含了 state, actions, mutations, getters, modules
State：Vuex 为单一数据源
可以通过 mapState 辅助函数将 state 作为计算属性访问，或者将通过 Store 将 state 注入全局之后使用 this.$store.state 访问
State 更新视图是通过 vue 的双向绑定机制实现的
Getter：Getter 的作用与 filters 有一些相似，可以将 State 进行过滤后输出
Mutation：Mutaion 是 vuex 中改变 State 的唯一途径（严格模式下），并且只能是同步操作。Vuex 中通过 store.commit() 调用 Mutation
Action：一些对 State 的异步操作可以放在 Action 中，并通过在 Action 提交 Mutaion 变更状态
Action 通过 store.dispatch() 方法触发
可以通过 mapActions 辅助函数将 vue 组件的 methods 映射成 store.dispatch 调用（需要先在根节点注入 store）
Module：当 Store 对象过于庞大时，可根据具体的业务需求分为多个 Module ，每个 Module 都具有自己的 state 、mutation 、action 、getter
Vuex 的特点：
单向数据流。View 通过 store.dispatch() 调用 Action ，在 Action 执行完异步操作之后通过 store.commit() 调用 Mutation 更新 State ，通过 vue 的响应式机制进行视图更新
单一数据源，和 Redux 一样全局只有一个 Store 实例
只能应用于 Vue

总结：
Flux 、Redux 、Vuex 均为单向数据流
Redux 和 Vuex 是基于 Flux 的，Redux 较为泛用，Vuex 只能用于 vue
Redux 、Vuex 适用于大型项目的状态管理
Redux 中引入了中间件，主要解决异步带来的副作用，可通过约定完成许多复杂工作

本文是对 Flux、Redux、Vuex 几种常用状态管理模式的总结，偏向于概念层面，不涉及过多代码。
什么是状态管理？
状态管理就是，把组件之间需要共享的状态抽取出来，遵循特定的约定，统一来管理，让状态的变化可以预测。

为什么需要状态管理？
状态共享：
组件之间通常会有一些共享的状态，在 Vue 或者 React 中我们一般会将这部分状态提升至公共父组件的 props 中，由父组件来统一管理共享的状态，状态的改变也是由父组件执行并向下传递。
变化跟踪：
在应用调试过程中，可能会有跟踪状态变化过程的需求，方便对某些应用场景的复现和回溯。这时候就需要统一对状态进行管理，并遵循特定的约定去变更状态，从而让状态的变化可预测。
Store 模式：
Store 模式是一种相对简单的状态管理模式，一般有以下约定：
状态存储在外部变量 store 里（也可以是全局变量）
store 中的 state 用于存储数据，由 store 实例维护
store 中的 actions 封装了改变 state 的逻辑
如果对 state 的变更均通过 actions，那么实现记录变更、保存快照、历史回滚就会很简单，但是 Store 模式并没有对此进行强制约束。

Flux
Flux 是一种架构思想，类似于 MVC 、MVVM 等。
Flux 的组成：
View：视图层
Action：动作，即数据改变的消息对象（可通过事件触发、测试用例触发等）
Store 的改变只能通过 Action，具体 Action 的处理逻辑一般放在 Store 里
Action 对象包含 type （类型）与 payload （传递参数）
Dispatcher：派发器，接收 Actions ，发给所有的 Store
Store：数据层，存放应用状态与更新状态的方法，一旦发生变动，就提醒 Views 更新页面
Flux 的特点：
单向数据流。视图事件或者外部测试用例发出 Action ，经由 Dispatcher 派发给 Store ，Store 会触发相应的方法更新数据、更新视图
Store 可以有多个
Store 不仅存放数据，还封装了处理数据的方法

Redux
Redux 的组成：
Store：存储应用的状态 -- state 以及用于触发 state 更新的 dispatch 方法等，整个应用仅有单一的 Store。Store 中提供了几个管理 state 的 API：
store.getState()：获取当前 state
store.dispatch(action)：触发 state 改变（唯一途径）
store.subscribe(listener)：设置 state 变化的监听函数（若把视图更新函数作为 listener 传入，则可触发视图自动渲染）
Action：同 Flux ，Action 是用于更新 state 的消息对象，由 View 发出
有专门生成 Action 的 Action Creator，其本质上是一个返回 Action 对象的函数
Reducer：是一个根据 action.type 更新 state 并返回 nextState 替换原来的 state 的同步的纯函数（对于相同的参数返回相同的返回结果，不修改参数，不依赖外部变量）。即通过应用状态与 Action 推导出新的 state：(previousState, action) => newState。Reducer 返回一个新的 state
Redux 的特点：
单向数据流。View 发出 Action (store.dispatch(action))，Store 调用 Reducer 计算出新的 state ，若 state 产生变化，则调用监听函数重新渲染 View （store.subscribe(render)）
单一数据源，只有一个 Store
state 是只读的，每次状态更新之后只能返回一个新的 state
没有 Dispatcher ，而是在 Store 中集成了 dispatch 方法，store.dispatch() 是 View 发出 Action 的唯一途径
支持使用中间件（Middleware）管理异步数据流

Vuex
Vuex 的核心概念：
Store：Vuex 采用单一状态树，每个应用仅有一个 Store 实例，在该实例下包含了 state, actions, mutations, getters, modules
State：Vuex 为单一数据源
可以通过 mapState 辅助函数将 state 作为计算属性访问，或者将通过 Store 将 state 注入全局之后使用 this.$store.state 访问
State 更新视图是通过 vue 的双向绑定机制实现的
Getter：Getter 的作用与 filters 有一些相似，可以将 State 进行过滤后输出
Mutation：Mutaion 是 vuex 中改变 State 的唯一途径（严格模式下），并且只能是同步操作。Vuex 中通过 store.commit() 调用 Mutation
Action：一些对 State 的异步操作可以放在 Action 中，并通过在 Action 提交 Mutaion 变更状态
Action 通过 store.dispatch() 方法触发
可以通过 mapActions 辅助函数将 vue 组件的 methods 映射成 store.dispatch 调用（需要先在根节点注入 store）
Module：当 Store 对象过于庞大时，可根据具体的业务需求分为多个 Module ，每个 Module 都具有自己的 state 、mutation 、action 、getter
Vuex 的特点：
单向数据流。View 通过 store.dispatch() 调用 Action ，在 Action 执行完异步操作之后通过 store.commit() 调用 Mutation 更新 State ，通过 vue 的响应式机制进行视图更新
单一数据源，和 Redux 一样全局只有一个 Store 实例
只能应用于 Vue

总结：
Flux 、Redux 、Vuex 均为单向数据流
Redux 和 Vuex 是基于 Flux 的，Redux 较为泛用，Vuex 只能用于 vue
Redux 、Vuex 适用于大型项目的状态管理
Redux 中引入了中间件，主要解决异步带来的副作用，可通过约定完成许多复杂工作