随着前端技术的发展，越来越多的复杂业务逻辑被前端所承载。在这样的情况下，为了实现前端数据的高可扩展与高可维护，一些前端状态管理工具应运而生。Redux 和 Vuex 就是其中比较流行的两个状态管理工具。本文将从以下几个方面对 Redux 与 Vuex 进行比较，并在最后给出具体实践。
Redux
Redux 是一个 JavaScript 状态管理容器，用于存储 React 应用的所有组件的状态。Redux 使用单一状态树，用于记录整个应用的状态，并使您的应用程序的行为可预测。 Redux 的工作流向非常简单：当一个事件被触发并传入 Redux 框架中时，Redux 框架根据事件类型更新存储在状态树内的状态。Redux 已被广泛应用于 React 和 React Native 应用中。
Redux 的优点：
- Redux 可以让开发者实现可预测性的状态管理。
- Redux 可以记录所有的状态操作，便于调试。
- Redux 面向组件，配合 React 更佳。
Redux 的缺点：
- Redux 必须使用 ES6 的语法与特定行为方式，因此需要较长时间的学习。
- 由于 Redux 是面向组件的，开发者需要在每个组件中实现 Redux 代码。
示例代码如下：
-- -------------------- ---- -------
-- -----
----- -------- - -----------
-- -------
-------- ------- ------ -
------ - ----- --------- ---- -
-
-- -------
-------- ----------- ------ - --- ------- -
------ ------------- -
---- ---------
------ ---------- - ----- ----------- --
--------
------ ------
-
-
-- -----
----- ----- - -------------------------------
-- ---------
------------------ -- -
-----------------------------
--
-- --------
----------------------------- --------Vuex
Vuex 是一个专门为 Vue.js 应用程序开发的状态管理库。与 React 中的 Redux 类似，Vuex 实现了“单向数据流”。Vuex 的核心概念是 store，存储了所有的应用程序状态，并提供可以去中心化地修改它们的方法。由于集成了 Vue.js 的特性，Vuex 更符合 Vue.js 的编写方式。
Vuex 的优点：
- Vuex 提供了一种简单的方法去组织和管理应用程序的状态。
- Vuex 的概念简单，便于快速学习并实现。
- Vuex 与 Vue.js 高度集成。
Vuex 的缺点：
- 由于 Vuex 是 Vue.js 应用程序特定的库，因此它不适用于非 Vue.js 应用程序。
示例代码如下：
-- -------------------- ---- -------
----- ----- - --- ------------
------ -
------ --
--
---------- -
------- ------- ----- -
----------------------
-
-
--
----------------------- ------ ------
------------------------------Redux vs Vuex
下面是 Redux 和 Vuex 的一些比较：
- Redux 是独立于 React/Vue.js 的一个库，而 Vuex 只是专为 Vue.js 设计的一部分。
- Redux 使用更广泛，可以与 React 进行无缝衔接；Vuex 只限于 Vue.js。
- Redux 实现了中间件机制使得可以副作用等附加数据处理；Vuex 则通过 Action 的方式进行异步处理。
- Redux 的优点在于提供了更加强大的逻辑控制，但也需要更多的代码；Vuex 的优点在于代码相对更少，较为简单且符合 Vue.js 的编写方式。
实践
下面是使用 React + Redux 实现一个 Todo 列表的示例代码：
-- -------------------- ---- -------
-- -----
----- -------- - -----------
-- -------
-------- ------- ------ -
------ - ----- --------- ---- -
-
-- -------
-------- ----------- ------ - --- ------- -
------ ------------- -
---- ---------
------ ---------- - ----- ----------- --
--------
------ ------
-
-
-- -----
----- ----- - -------------------------------
-- --
----- -------- ------- --------------- -
----------- ------- -
-------------
---------- - -
----------- ---
------ --
-
-
------ -- -
------ -
-----
------ ----------- ----------------------------- ----------------- -- -------------------------- --------------------- --
------- ----------- -- -
----------------------------------------------
-------------------------- ----
---------------
----
---------------------------- ------ -- ---- -------------------------------
-----
------
-
-
-
-- ------
----------------
--------- ------------------------ ---
-------------------------------
--
-- ---------
------------------ -- -
----------------
--------- ------------------------ ---
-------------------------------
--
--使用 Vue.js + Vuex 实现相同功能的示例代码：
-- -------------------- ---- -------
----- ----- - --- ------------
------ -
------ --
--
---------- -
------- ------- ----- -
----------------------
-
-
--
-- --
----- -------- - -
---- -- -
------ -
----------- --
-
--
--------- -
----- -- -
------ -----------------------
-
--
-------- -
------- -- -
----------------------- ----------------
--------------- - --
-
--
--------- -
-----
------ ----------- -------------------- --
------- -----------------------------
----
--- ------------- ------ -- ------ --------------- ---- -------
-----
------
-
-
-- ------
--- -----
--- --------
------
----------- -----------
--------- ---------- ---
--结论
上面就是 Redux 和 Vuex 的对比以及实践示例。我们可以看到，虽然 Redux 和 Vuex 之间有着许多相似之处，但它们处理逻辑的方式却有很大差异。开发者可以根据自己的需要选择适合自己的状态管理工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f505cec5c563ced56a387a