@emanimation/pinia-plugin-history

Pinia Plugin History

Add undo and redo methods to any of your pinia 🍍 stores! for various types of state values, which include Dates, BigInts, Functions, Maps, Sets, circular objs and more.

Installation

npm install pinia-plugin-history

or

yarn add pinia-plugin-history

Usage

import { PiniaHistory } from 'pinia-plugin-history'

// Pass the plugin to your application's pinia plugin
pinia.use(PiniaHistory)

You can then use a history option in your stores:

defineStore('id', () => {
  const count = ref(2)
  
  return { count }
}, { history: true })

or

defineStore('id', {
  state:   () => ({ count: 2 }),
  history: true
})

This will automatically add two actions undo and redo as well as two getters canUndo and canRedo to you store. It will also automatically add the proper typings if you're using TypeScript 🎉

Example

<template>
  <div>
    <button :disabled="!store.canUndo" @click="store.undo">Undo</button>
    <button :disabled="!store.canRedo" @click="store.redo">Redo</button>
    <input type="number" v-model="store.count"/>
  </div>
</template>

<script lang="ts" setup>
  import { useStore } from '@/store'; // store defined in another file as above

  const store = useStore();

  store.count = 5;
  store.undo(); // undoes the previous assignment of 5
  console.log(store.count); // => 2
  store.redo(); // redoes the earlier assignment of 5
  console.log(store.count); // => 5
</script>

Configuration

You may also pass some extra configuration to the history option.

defineStore('id', {
  state:   () => ({ count: 2, toIgnore: 'this will be ignored thru options' }),
  history: {
    max:  25, // Maximum number of items to keep in history (default: 10)
    omit: ['toIgnore'], // shallow
    
    persistent: true, // Whether to store the current history locally in your browser (default: false)
    
    persistentStrategy: { // How to store locally in your broswer (default: use `localStorage` if available)
      get (store: HistoryStore, type: 'undo' | 'redo'): string[] | undefined,
      set (store: HistoryStore, type: 'undo' | 'redo', value: string[]): void,
      remove (store: HistoryStore, type: 'undo' | 'redo'): void
    }
  }
})

Acknowledgements

Yasser Lahbibi: [e-mail] - the difference with this one is the use of a better cloning strategy that tries to keep the original objects as they were and also works with functions. Plus other various additions features and options.

License

MIT