前言
在前端开发中，表单是非常常见的一种交互形式。然而，表单的交互逻辑是复杂的，包括表单校验、表单数据提交、表单对应组件的状态管理等问题。针对这些问题，有一个 npm 包叫做 form-store，它提供了一套便捷的表单状态管理方案。本文将介绍如何使用 form-store。
安装
安装 form-store 非常简单，只需要在终端中输入：
npm install form-store
即可完成安装。
使用
使用 form-store 首先需要导入它：
import FormStore from 'form-store';
创建 FormStore 实例
使用 form-store 的第一步就是创建一个 FormStore 实例。FormStore 构造函数接受一个对象作为参数，其中包括表单数据、表单校验规则和表单提交方法三个参数，具体内容如下：
-- -------------------- ---- -------
----- ----- - --- -----------
----- -
--------- ---
--------- ---
--
------ -
--------- -
--------- -----
-------------- -
------ -----------------------------
--
-------- ------------------------------ - ----
--
--------- -
--------- -----
-------------- -
------ ---------------------------------------------------
--
-------- ------------------- - ----
--
--
-------------- -
--------------------
--
---- data：表单数据对象，它的键值和表单中的表单控件一一对应；
- rules：表单数据校验规则对象，它的键值和表单数据对象的键值一一对应，值是一个对象，包括 required、validator 和 message 三个属性；
- submit：表单数据提交方法，当表单通过校验时会被调用，values 就是表单数据对象。
注意，这里只是一个示例，实际使用时 data 和 rules 可能会更加复杂。
获取表单数据
获取表单数据非常简单，只需要调用 FormStore 实例的 getData 方法即可：
const data = store.getData();
更新表单数据
更新表单数据也很容易，只需要调用 FormStore 实例的 setData 方法即可：
store.setData({
username: 'Tom',
password: '123456',
});表单校验
表单校验是 form-store 最重要的功能之一。在上面创建 FormStore 实例时已经设置好了相应的校验规则，现在只需要调用 FormStore 实例的 validate 方法即可：
const result = store.validate();
validate 方法返回一个对象，包括 valid 和 errors 两个属性。其中 valid 表示表单数据是否通过了校验，errors 表示校验不通过的错误信息，以控件名为键，错误信息为值。
获取表单校验结果
获取表单校验结果也很简单，只需要调用 FormStore 实例的 getResult 方法即可：
const result = store.getResult();
getResult 方法返回一个对象，包括 valid 和 errors 两个属性。其中 valid 表示表单数据是否通过了校验，errors 表示校验不通过的错误信息，以控件名为键，错误信息为值。
获取控件校验结果
获取单个控件的校验结果也很方便，只需要调用 FormStore 实例的 getFieldResult 方法并传入控件名即可：
const result = store.getFieldResult('username');getFieldResult 方法返回一个对象，包括 valid 和 error 两个属性。其中 valid 表示控件数据是否通过了校验，error 表示校验不通过的错误信息。
设置表单校验状态
如果需要在表单控件被修改时重新校验表单，可以调用 FormStore 实例的 setDirty 方法：
store.setDirty();
监听表单数据变化
如果希望在表单数据发生变化时进行相应的操作，可以调用 FormStore 实例的 watch 方法：
store.watch((data) => {
console.log(data);
});watch 方法接受一个回调函数作为参数，当表单数据发生变化时会调用这个回调函数，参数是最新的表单数据对象。注意，这个回调函数会在表单数据发生改变时立即被调用，如果希望在表单提交时才被调用，可以在表单提交方法中进行相应操作。
示例代码
下面是一个完整的使用 form-store 的示例代码：
-- -------------------- ---- -------
------ --------- ---- -------------
----- ----- - --- -----------
----- -
--------- ---
--------- ---
--
------ -
--------- -
--------- -----
-------------- -
------ -----------------------------
--
-------- ------------------------------ - ----
--
--------- -
--------- -----
-------------- -
------ ---------------------------------------------------
--
-------- ------------------- - ----
--
--
-------------- -
--------------------
--
---
----- ---- - -------------------------------
------------------------------- ------- -- -
-----------------------
----- ------ - -----------------
-- -------------- -
---------------
- ---- -
-- ------
-
---
----- ------------- - ------------------------------------
----- ------------- - ------------------------------------
--------------------------------------- ------- -- -
---------------
--------- -------------------
---
---
--------------------------------------- ------- -- -
---------------
--------- -------------------
---
---
------------------ -- -
------------------
---结语
form-store 提供了一种便捷的表单状态管理方案，可以大大简化表单开发中的状态管理逻辑。本文介绍了 form-store 的使用方法，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/206586