@emanimation/pinia-plugin-history
v2.0.2
Published
Create a history (undo/redo) in your pinia ๐ stores! for various types of state values, which include Dates, BigInts, Functions, Maps, Sets, circular objs and more.
Downloads
18
Readme
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: [email protected] - 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.