https://github.com/yassilah/pinia-plugin-history

https://github.com/yassilah/pinia-plugin-history

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/yassilah/pinia-plugin-history
• Owner: yassilah
• License: mit
• Created: 2021-08-09T18:34:02.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-05-13T19:04:03.000Z (over 2 years ago)
• Last Synced: 2024-10-11T10:42:03.662Z (3 months ago)
• Language: TypeScript
• Size: 105 KB
• Stars: 14
• Watchers: 1
• Forks: 2
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  Pinia Plugin History





  





  





  



Add undo and redo methods to any your pinia 🍍 stores!

## Installation

```sh

npm install pinia-plugin-history

```

or

```sh

yarn add pinia-plugin-history

```

## Usage

```ts

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:

```ts

defineStore('id', () => {

    const count = ref(2)

    return { count }

}, { history: true })

```

or 

```ts

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

```vue

    


        Undo

        Redo

        

    

 


import { useStore } from '@/store'

const store = useStore()

```

## Configuration

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

```ts

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

        } 

    }

})

```

## License

[MIT](http://opensource.org/licenses/MIT)