技能介绍

先解决什么问题

当客户草稿包含联系人列表、地址嵌套等深层字段时，最常见的写法是直接对 store 里的对象做深层赋值。问题在于，这类写法会就地 mutate 原对象：在 Vue/React 中可能触发视图不同步，在需要撤销、对比、审计的场景里也难以拿到前后快照。更麻烦的是，为了保持不变性，开发者往往要手写大量展开运算，代码很快变得难以维护。

技能如何工作

该技能以 immer 为基础，把状态更新收敛到 produce 或对 produce 的封装里。你可以在回调内使用可变写法，例如 push、splice 或直接修改草稿字段；回调外则把返回值赋回 state。这样实际得到的是新对象引用，而不是对旧对象的就地修改。

实现时建议先在项目中接入 immer，并封装 patchDraft 与业务小函数，让所有草稿字段变更都经过同一入口。保存前可用 JSON.stringify 对比前后内容，或把 produce 之后的新对象序列化到 localStorage。自测时至少确认两点：更新后的 next !== prev，且 prev.name 未被改掉。

适用边界与注意点

它适合深层字段频繁变更、需要撤销或对比快照、不想手写大量展开运算的草稿场景。不要在 produce 里发请求或读 DOM，保持纯更新；与 localStorage 联用时，序列化的对象必须是 produce 之后的新对象，而不是原始 store 引用。TypeScript 项目中，草稿类型应与客户类型保持一致，避免用 any 绕过类型检查。