用 proxy 实现带撤销功能的数据状态机,核心是在 set 拦截中深拷贝当前 state 并存档快照、重置重做栈,配合 currentindex 指针管理历史数组索引,支持 undo/redo 操作。

用 Proxy 实现带撤销功能的数据状态机,核心在于拦截赋值操作并自动保存历史快照,而不是靠手动记录或轮询比对。关键不在于“重写所有逻辑”,而是在 set 拦截中触发快照存档,并维护一个可回溯的指针结构。
用 Proxy 拦截变更并存档快照
每次对代理对象属性赋值时,set trap 会捕获该操作。此时应: - 先深拷贝当前 state(避免后续修改污染历史) - 将拷贝推入历史数组 - 更新当前值 - 重置“重做”栈(因新操作使后续重做失效)
- 不要直接 push 原始引用,要用 structuredClone 或 JSON 序列化+解析(注意函数、Date 等需特殊处理)
- 快照应包含时间戳和操作标识(如字段名),便于调试与可视化
- 为避免内存膨胀,可限制历史长度(如只保留最近 50 步)
封装 undo/redo 方法并管理指针位置
状态机需维护 currentIndex(指向当前有效状态在 history 数组中的索引)。初始为 0,每 undo 减 1,每 redo 加 1。实际取值时,根据 currentIndex 从 history 中读取对应快照。
安装并运行 Aperture(Lightning Labs 的 L402 闪电反向代理),用于创建 L402 付费墙、配置付费 API 端点、为其他代理托管付费内容或测试 L402 认证流程。
- undo 前检查 currentIndex > 0;redo 前检查 currentIndex
- 执行 undo 后,用 Object.assign 或逐字段赋值还原到上一快照,再更新 currentIndex
- 不建议直接替换整个 proxy.value,而是同步目标对象,保持响应式链路不断
结合 valtio-history 等成熟方案更稳妥
手写完整撤销逻辑易出错(如嵌套对象变更未触发快照、异步赋值竞争等)。推荐优先使用 proxyWithHistory 这类已验证工具:
- 它内部已处理 deep clone、指针边界、批量变更合并等细节
- 暴露 canUndo/canRedo 方法,方便控制 UI 按钮禁用状态
- history.nodes 是不可变快照数组,value 始终是当前状态的响应式代理
注意撤销粒度与用户预期一致
撤销不是按“每次 set 调用”机械回退,而应匹配用户操作语义。例如: - 用户点击一次“加粗”按钮,可能触发多个样式字段变更 → 应合并为单次快照 - 可在 handler 的 set 中引入防抖或事务标记(如 startTransaction/endTransaction) - 或配合外部 action 名称,在快照中记录 { type: 'toggle-bold', payload: {...} },便于重放与审计










