前言
在前端开发中，我们经常会遇到需要管理表单数据变更的问题。@stembord/changeset 是一个可以帮助我们处理表单数据变更的 npm 包，它可以以一种简单、可控、可扩展的方式管理表单数据的变更，并支持对变更进行回滚和提交等操作。本文将为大家详细介绍如何使用这个 npm 包。
安装
要使用 @stembord/changeset，我们首先需要安装它。我们可以使用 npm 或者 yarn 来进行安装，如下所示：
# 使用 npm 安装 npm install @stembord/changeset # 使用 yarn 安装 yarn add @stembord/changeset
快速开始
可以使用以下代码来创建一个最基本的 changeset：
-- -------------------- ---- ------- ------ --------- ---- ---------------------- ----- ---- - - -- - -- - - -- ----- --------- - ---------------- ----------------------- --- ---------------------------------- -- -- - --------------------- ---------------------------------- -- -- -
在上面的代码中，我们首先引入了 @stembord/changeset 包，然后创建了一个最基本的 changeset，并对数据进行了修改，这样可以帮助我们管理表单数据的变更。
API
Changeset 包提供了以下的 API：
Changeset
是一个工厂函数，用来创建一个 Changeset 实例，接收一个数据对象作为参数。使用方式：
import Changeset from '@stembord/changeset';
const data = { a: { b: 1 } };
const changeset = Changeset(data);.change(path, value)
用来修改 Changeset 实例中的数据，接收两个参数，分别是修改数据的路径和修改后的值，使用方式：
changeset.change('a.b', 2);.get(path)
用来获取 Changeset 实例中的数据，接收一个参数，即数据的路径，使用方式：
console.log(changeset.get('a.b')); // 输出 2.rollback()
用来撤销 Changeset 实例中的所有修改，使用方式：
changeset.rollback();
.release()
用来提交 Changeset 实例中的所有修改，使用方式：
changeset.release();
.isValid()
用来判断 Changeset 实例中的数据是否合法，使用方式：
console.log(changeset.isValid()); // 输出 true 或 false
案例分析
现在我们来看一个更加复杂的案例，以深入理解如何使用 @stembord/changeset 来管理表单数据的变更。假设我们有一个商品列表，每个商品有一个名称、价格和数量，我们需要实现以下功能：
- 点击某一行编辑按钮，可以编辑该行的名称、价格和数量；
- 在编辑过程中，只有当数据都合法时才能提交；
- 点击某一行删除按钮，可以删除该行。
首先我们准备一组商品数据，如下所示：
const data = [
{ id: 1, name: '商品 1', price: 10, quantity: 1 },
{ id: 2, name: '商品 2', price: 20, quantity: 2 },
{ id: 3, name: '商品 3', price: 30, quantity: 3 },
{ id: 4, name: '商品 4', price: 40, quantity: 4 },
{ id: 5, name: '商品 5', price: 50, quantity: 5 },
];我们可以将每个商品的数据包装为一个 Changeset，这样可以将每个商品的修改和删除各自管理起来。我们可以使用以下代码来创建每个商品的 Changeset：
import Changeset from '@stembord/changeset';
const dataWithChangesets = data.map(item => {
const changeset = Changeset(item);
return { ...item, changeset };
});有了每个商品的 Changeset，我们就可以在用户点击编辑按钮时，将该商品对应的 Changeset 显示在表单中，以方便用户进行修改操作。我们为表单添加一个 onSubmit 回调函数，用来在用户提交表单时验证数据的合法性：
-- -------------------- ---- -------
-------- ---------------- -
----- - ----- ------ --------- --------- - - -------
------------------------ ------
------------------------- ---------------
---------------------------- ------------------
-
---------
-----------------------------
-------------------
------------------------
-
-------------
-----------
----------
--------- --------- ----- -------- ------- ---
-
------ --
---------------
-------------
------------
----------
--------
- --------- ----- -------- ------- --
- ----- --------- -------- -------- ---------- ----- -- ------------- --
--
-
------------ --
---------------
-------------
---------------
----------
--------
- --------- ----- -------- ------- --
- ----- --------- -------- -------- ---------- ----- -- ------------- --
--
-
------------ --
---------------
--------------
------- -------------- -----------------------------
---------------
-----------最后，当用户点击删除按钮时，我们可以使用以下代码来删除对应的商品：
function onDelete() {
data.splice(index, 1);
setData([...data]);
}通过上面的代码，我们学会了如何使用 @stembord/changeset 来管理表单数据变更。使用 @stembord/changeset 可以帮助我们实现更加复杂和可控的数据变更。希望本文可以对大家有所帮助，谢谢大家阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006736f890c4f7277584091