Pinia 撤销！重做！

使用Vue的开发者，对Pinia一定不会陌生。

作为Vue官方新一代状态管理库，Pinia用更简洁的语法、更完善的 TypeScript 支持，以及去除了 mutations 的“直接改 state”风格，迅速取代了 Vuex，成为 Vue2 / Vue3 项目的首选。

然而，状态管理越集中，用户就越容易“手滑”——一不小心把表单清空、把配置覆盖、把画布误删。

此时，如果像 Photoshop 那样 Ctrl + Z 就能撤销，该多好？

这正是本文主角pinia-undo的价值所在：给任何Pinia Store一键加上“时间旅行”能力。

什么是 pinia-undo？

pinia-undo是一个开箱即用的 Pinia 插件，它会在你的 Store 里自动注入：

• undo() – 撤销到上一状态
• redo() – 重做刚才被撤销的变更
• history – 只读的历史栈，方便调试或显示“可撤销步数”

• 零侵入：不改动你原有的 state / action
• 可配置：想忽略某些字段？想禁用历史？想自定义序列化？都支持
• 轻量化：仅 1 个依赖，gzip 后 < 2 kB
• 兼容 Vue2 & Vue3：只要 Pinia 能跑，它就能跑

1. 安装

pnpm add pinia-undo# 或 npm / yarn

2. 注册插件

// main.tsimport { createPinia } from 'pinia'import { PiniaUndo } from 'pinia-undo'const pinia = createPinia()pinia.use(PiniaUndo) // 一行代码，全局生效app.use(pinia)

3. 像平常一样写 Store

// stores/counter.tsexport const useCounter = defineStore('counter', {state: () => ({count: 10,name: 'Pinia'}),actions: {inc() { this.count++ },dec() { this.count-- }})

4. 模板里直接调用

{{ counter.count }}+1-1
 ↶ 撤销 ↷ 重做 

提示：undo() / redo() 在栈顶/栈底会自动空操作，不会产生异常；你也可以通过 canUndo / canRedo 禁用按钮。

① 忽略敏感字段

有些字段（如 loading、updatedAt）不需要进入历史：

export const useForm = defineStore('form', {state: () => ({ name: '', age: 0, loading: false }),// 告诉插件：别管 loadingundo: { omit: ['loading'] }})

② 临时关闭历史

某些批处理操作想一次性提交，不想生成中间态：

export const useCanvas = defineStore('canvas', {undo: { disable: false }, // 默认开启actions: {batchUpdate(list) {this.$patch((state) => {// 先关历史this.$pinia.state.value.canvas.__UNDO_DISABLE = truelist.forEach((op) => { /* 大量修改 */ })// 再开历史this.$pinia.state.value.canvas.__UNDO_DISABLE = false})

③ 自定义序列化

当 state 里包含 Map、Set、Dayjs 等不可 JSON 直接序列化的对象时：

import devalue from '@nuxt/devalue'export const useAdvanced = defineStore('advanced', {undo: {serializer: {serialize: devalue,deserialize: (str) => eval(`(${str})`) // devalue 逆向})

问题

回答

兼容 Pinia 2 吗？

✅ 实测 Pinia 2.0+ 无问题

支持 SSR 吗？

✅ 历史栈保存在客户端，不影响服务端渲染

内存会不会爆？

默认保留 100 步，可自己裁剪 history 数组

能同时监听多个 Store 吗？

插件全局注册后，所有Store 都自动拥有 undo/redo

状态管理给了 Vue 应用“单一数据源”的便利，也带来了“一错全错”的风险。

pinia-undo用不到 200 行源码的代价，把“撤销 / 重做”这一桌面软件级体验带进 Web 端：

• 不写 mutations，不改业务逻辑
• 不依赖后端，不额外存储
• 配置一下，就能让任何 Pinia Store 回到过去

下次产品说“用户误删能不能还原”时，你可以淡定回答：已经自带 Ctrl + Z 了。

• Github 地址：https://github.com/wobsoriano/pinia-undo