在 Vue.js 应用中，表单是一个常见的组件。随着应用规模的增长，表单数据和逻辑变得越来越复杂，难以维护。Vuex 是 Vue.js 官方推荐的状态管理工具，它可以让我们更好地管理表单数据状态。
Vuex 简介
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它充当着多个组件共享状态的中央存储库。在Vuex中，数据都以 state 的形式存储，而所有组件都共享这一单一状态树。
此外，Vuex 还利用了单向数据流的概念，即用户操作触发 action 以进行 commit，mutation 修改 state。如下所示：
以上是一个简单的数据流示例。当用户点击一个按钮时，它会发送一个 Action。这将在 Store 中处理，并触发一个 Mutation 来更改 State 的值。这将更新所有在 State 中定义的组件和视图，从而看到新的更新。
在表单中使用 Vuex
对于一个具体的表单实例，在 Vuex 中构建它的状态分为两个层次：
- 局部状态（Local State）：表单的非全局性属性，如输入框的值、勾选框的状态等。
- 全局状态（Global State）：表单的全局性属性，如提交后后端返回的结果、表单所有属性的错误信息等。
局部状态
我们假设有一个简单的登录表单，其中包含用户名和密码输入框，以及一个登录按钮。我们可以采用以下三个步骤进行状态管理：
- 创建本地状态
-- -------------------- ---- ------- -- ---------------------- ----- ----- - - --------- --- --------- -- - ------ ------- - ----- -
- 声明 mutation
-- -------------------- ---- -------
-- ----------------------
----- --------- - -
---------------- ------- -------- -
------------------ - -------------
-
-
------ ------- -
------
---------
-- 在组件中使用
-- -------------------- ---- -------
----------
-----
------ ------------------ ------------------------------- ----------------------
------ ------------------ ------------------------------- ----------------------
------- ----------------------------
------
-----------
--------
------ - ------------ - ---- ------
------ ------- -
----- ------------
-------- -
-----------------
----------------- ------------------------
---
----------- ----- ------ -
-----------------------
----
-----
--
--
----- -- -
-- ----
-
--
--------- -
-------- -- -
------ --------------------------------
--
-------- -- -
------ --------------------------------
-
-
-
---------在组件中，我们通过 v-model 绑定输入框数据，并通过 mapMutations 创建了 updateInputValue 方法。它将触发 login/updateInputValue 的 mutation，从而更新状态。
全局状态
对于全局状态，我们需要根据具体情况选择相应的方案。
我们假设一个表单的提交需要数据校验，并需要异步通信来提交数据。我们可以采用以下三个步骤进行状态管理：
- 创建全局状态
-- -------------------- ---- ------- -- --------------------- ----- ----- - - --------- --- ----------- ----- ------------ ---- - ------ ------- - ----- -
- 声明 action
-- -------------------- ---- -------
-- ---------------------
----- ------- - -
--------------- -- ------ -- --------- -
------ --- ----------------- ------- -- -
-- ------------------
-------------------------- ------ -- -
-- ---------- --- -- -
----------------- ----------
---------------------
- ---- -
----- ----- - ----------- -- ------------ -- -------------
------------------ ------
-------------
-
--
--
-
-
------ -------- ---------------- ---------- --------- -
------------- -- -
----------
----- ------------------------ - ---
-------- ---
------- -----
----- --------
--
-- -----
-
------ ------- -
------
-------
-- 声明 mutation
-- -------------------- ---- -------
-- ---------------------
----- --------- - -
------- ------- -------- -
-------------- - -------
---------------- - ----
----------------- - ----
--
-------- ------- -------- -
---------------- - -------
----------------- - -----
-
-
------ ------- -
------
--------
---------
-类似于局部状态，在组件中我们可以拆分为以下几个步骤使用：
- 引入 action，提交表单数据
-- -------------------- ---- -------
----------
-----
------ -------------------
------ -------------------
------- -------------------------------
------
-----------
--------
------ - ---------- - ---- ------
------ ------- -
----- ------------
-------- -
---------------
---------------- ----------------------
---
---------- -- -
------------------------------- -------------- --------- ---------------
-
--
--------- -
-------- -- -
------ --------------------------------
--
-------- -- -
------ --------------------------------
-
-
-
---------- 监听表单提交状态
-- -------------------- ---- -------
----------
-----
------ -------------------
------ -------------------
------- -------------------------------
---- ---------------------- ---------- --------
---- ----------------------------------------------------------
------
-----------
--------
------ - ----------- -------- - ---- ------
------ ------- -
----- ------------
-------- -
---------------
---------------- ----------------------
---
---------- -- -
------------------------------- -------------- --------- ----------------------- -- -
------------------- ---------
------------ -- -
------------------- ------ -- --
--
-
--
--------- -
-------------
----------- ------- -- ----------------------
------------ ------- -- ----------------------
---
-------- -- -
------ --------------------------------
--
-------- -- -
------ --------------------------------
-
-
-
---------在组件中，我们使用mapActions引入submitFormAsync方法，并在按钮提交时调用submitForm方法提交。此外，我们从状态中派到了formErrors和formSuccess数据，并使用v-show属性显示错误或成功信息。
总结
使用 Vuex 可以方便地管理表单数据的状态，避免了无序、混乱的状态传递，并在多个组件中共享表单的状态，增强了代码的可维护性和可拓展性。同时，我们还需要注意，全局状态相较于局部状态需要处理异步请求和提交等问题。
完整示例代码：Github。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c3f33968c7c53b075d600