pinia-undo

Enable time-travel in your apps. Undo/Redo plugin for pinia.
6,514 98
Install
npm install pinia-undo
Latest Version:0.2.4
Vue:3
Older releases:2
License:MIT
Last Updated:Dec 15, 2023
Links: GitHub  ·  npm
Maintainer: wobsoriano

pinia-undo

Enable time-travel in your apps. Undo/Redo plugin for pinia.

Requires Vue ^2.6.14 || ^3.2.0

Install

pnpm add pinia pinia-undo

Usage

import { PiniaUndo } from 'pinia-undo'

const pinia = createPinia()
pinia.use(PiniaUndo)

This adds undo and redo properties to your stores.

const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 10,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
})

const counterStore = useCounterStore()

// undo/redo have no effect if we're at the
// beginning/end of the stack
counterStore.undo() // { count: 10 }
counterStore.redo() // { count: 10 }

counterStore.increment() // { count: 11 }
counterStore.increment() // { count: 12 }

counterStore.undo() // { count: 11 }
counterStore.undo() // { count: 10 }
counterStore.undo() // { count: 10 }

counterStore.redo() // { count: 11 }

Options

Name Type Default Description
omit array [] An array of fields that the plugin will ignore.
disable boolean false Disable history tracking of store.
serializer object { serializer: JSON.stringify, deserializer: JSON.parse } Custome serializer to serialize state before storing it in the undo stack. 
const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 10,
    name: 'John Doe',
  }),
  undo: {
    omit: ['name'],
  },
})

License

MIT.

Version History

Version Released Vue License
0.2.4 ^3.3.10 MIT
0.2.2 ^3.3.10 MIT
0.2.1 ^3.3.10 MIT
0.2.0 ^3.3.4 MIT
0.1.9 ^3.2.45 MIT