前端领域中的状态管理方式剖析：Flux、Redux 与 Vuex
随着前端应用的复杂性不断提高，前端领域中的状态管理也逐渐显得愈发重要。为了方便观察、修改和控制应用状态，开发者们逐渐发展出了多种状态管理方式，其中 Flux、Redux 与 Vuex 是最为流行的三种。
Flux
Flux 模式最早是由 Facebook 的工程师提出的，目前已成为前端开发中较为重要的状态管理方式之一。Flux 的理念是通过分离数据和实现来简化应用逻辑。Flux 设计了一个严密的单向数据流的模式，方便开发者更好地维护应用的状态。具体而言，Flux 模式主要包括 Dispatcher、Actions、Stores，以及 Views。
- Dispatcher: 分发器，用于将数据传递给注册的所有 Store。
- Actions: 通过创建并触发 Action 的方式来描述 UI 动作，从而让 Dispatcher 传递数据给 Store。
- Stores: 用于保存应用的状态，并响应来自 Dispatcher 的操作。
- Views: 从 Store 中获取数据，并将数据渲染到 UI 上。
下面是一个 Flux 模式的示例代码，用于实现计数器的增加和减少：
Dispatcher：
-- -------------------- ---- -------
--- ---------- - ---------------------------
--- ------------- - --- -------------
-- ------ -------- -- ----------
--------------------------------------- -
------------------- -
---- -----------
------------------------------------------
------
---- -----------
------------------------------------------
------
--------
------
-
---
-------------- - --------------Actions：
-- -------------------- ---- -------
--- ------------- - ---------------------------------------
--- ------------- - -
--------------- ---------------- -
------------------------
----- -----------
------- ------
---
--
--------------- ---------------- -
------------------------
----- -----------
------- ------
---
-
--
-------------- - --------------Stores：
-- -------------------- ---- -------
--- ------------ - -------------------------------
--- - - ------------------
--- ------------ - ---------
--- ------- - --
--- ----------- - ------------ ----------------------- -
---------- ---------- -
------ --------
--
--------------- ---------------- -
------- -- -------
------------------
--
--------------- ---------------- -
------- -- -------
------------------
--
----------- ---------- -
------------------------
--
------------------ ------------------ -
--------------------- ----------
--
--------------------- ------------------ -
--------------------------------- ----------
-
---
-------------- - ------------Views：
-- -------------------- ---- -------
--- ----- - -----------------
--- ----------- - --------------------------------
--- ------------- - ------------------------------------
--- ------ - -------------------
---------------- ---------- -
------ -
------- -
--
--
------------------ ---------- -
----------------------------------------------
---------------
------- -----------------------
---
--
--------------------- ---------- -
-------------------------------------------------
--
---------- ---------- -
---------------
------- -----------------------
---
--
----------- ---------- -
--------------------------------
--
-------------- ---------- -
--------------------------------
--
------- ---------- -
------ -
-----
----------------------------
------- --------------------------------------
------- --------------------------------------------
------
--
-
---
-------------- - -------Redux
Redux 是 Flux 模式的一种实现方式，Redux 的主要思想是通过简单的函数来管理应用的状态。Redux 可以被看作是 Flux 的改进版，主要做了如下的改进：
- 取消了 Dispatcher，改用统一的数据处理器 —— Reducer。
- Actions 变为纯函数，以便更好地管理应用状态。
- 取消了 Stores，并采用单一的 Store。
Redux 看上去可能更加简单，但是它为了实现这些改进，却牺牲了部分代码的可读性。下面是一个使用 Redux 的计数器示例代码：
Actions：
-- -------------------- ---- -------
------ ----- ---------- - -------------
------ ----- --------------- - ------------------
------ -------- ---------------- -
------ -
----- -----------
------ -----
--
-
------ -------- --------------------- -
------ -
----- ----------------
------ -----
--
-Reducers：
-- -------------------- ---- -------
------ - ----------- --------------- - ---- -------------
----- ------------ - -
------- -
--
-------- ------------- - ------------- ------- -
------------------- -
---- -----------
------ -
------- ------------ - ------------
--
---- ----------------
------ -
------- ------------ - ------------
--
--------
------ ------
-
-
------ ------- --------Store：
import { createStore } from 'redux';
import reducer from '../reducer';
const store = createStore(reducer);
export default store;Views：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ---------- -------------- - ---- -------------
----- ------ ------- --------- -
------------------ -
-------------
-------------- - --------------------------
------------------- - -------------------------------
-
----------- -
----------------------------------
-
---------------- -
---------------------------------------
-
-------- -
------ -
-----
----------------------------
------- -------------------------------------
------- -----------------------------------------------
------
--
-
-
-------- ---------------------- -
------ -
------- ------------
--
-
------ ------- ---------------------------------Vuex
Vuex 是 Vue.js 官方出品的一款状态管理库，它被设计为严格的 Flux 实现，提供了更多的功能、更强的拓展性和可靠性。Vuex 的核心思想和 Flux 以及 Redux 一样，都是单向数据流。实际上，Vuex 就是为 Vue.js 提供 Flux 的实现方式。在 Vuex 中，应用状态被放在 Store 中，并使用 Actions 来进行状态更新。Actions 将状态更新的请求发送给 Mutations，而 Mutations 是专门用于修改状态的方法。下面是一个简单的计数器示例：
State：
export default {
number: 0
};Mutations：
export default {
INCREASE_NUMBER(state, payload) {
state.number += payload;
},
DECREASE_NUMBER(state, payload) {
state.number -= payload;
}
};Actions：
export default {
increaseNumber({commit}, payload) {
commit('INCREASE_NUMBER', payload);
},
decreaseNumber({commit}, payload) {
commit('DECREASE_NUMBER', payload);
}
};Getters:
export default {
getNumber: state => state.number
};Store：
-- -------------------- ---- -------
------ --- ---- ------
------ ---- ---- -------
------ ------- ---- ------------
------ --------- ---- --------------
------ ------- ---- ------------
------ ----- ---- ----------
--------------
------ ------- --- ------------
------
--------
--------
---------
---Views：
-- -------------------- ---- -------
----------
-----
-------------------
------- ------------------------------------
------- -----------------------------------------
------
-----------
--------
------ ------- -
-------- -
---------------- -
-------------------------------------- ---
--
---------------- -
-------------------------------------- ---
-
--
--------- -
-------- -
------ ------------------------------
-
-
--
---------结论
以上是 Flux、Redux 和 Vuex 三种前端领域中常见的状态管理方式。每一种方式都有着特别的优势和限制，开发者们需要根据自己的需求，选择适合自己的方式。在实际开发中，开发者们能够将三种方式灵活地运用到项目中，并在这过程中不断探索和发现更多更优秀的实现方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6752ff758bd460d3ad9a4f55