使用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 / yarn2. 注册插件
// 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
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.