pinia-plugin-history
v1.3.0
Published
Create a history (undo/redo) in your pinia ๐ stores!
Downloads
90
Maintainers
Readme
Add undo and redo methods to any your pinia ๐ stores!
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="undo">Undo</button>
<button :disabled="!store.canRedo" @click="redo">Redo</button>
<input type="number" v-model="store.count" />
</div>
</template>
<script lang="ts" setup>
import { useStore } from '@/store'
const store = useStore()
</script>
Configuration
You may also pass some extra configuration to the history
option.
defineStore('id', {
state: () => ({ count: 2}),
history: {
max: 25, // Maximum number of items to keep in history (default: 10)
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
}
}
})