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.