Pinia Debounce

Debounce any action in your pinia 🍍 store!

This is also a very good example of how to create a pinia plugin and how to type it.

Installation

``sh
npm install @pinia/plugin-debounce
`

You also need to use a debounce function like lodash.debounce or ts-debounce

Usage

`js
import { debounce } from 'ts-debounce'
import { PiniaDebounce } from '@pinia/plugin-debounce'

// Pass the plugin to your application's pinia plugin
pinia.use(PiniaDebounce(debounce))
`

You can then use a debounce option in your stores:

`js
defineStore('id', {
actions: {
someSearch() {
// ...
},
other() {
// ...
},
},
debounce: {
// debounce all someSearch calls by 300ms
someSearch: 300,
// you can pass an array of arguments if your debounce implementation accepts extra arguments
someSearch: [
300,
{
// options passed to debounce
isImmediate: true,
},
],
},
})
`

For setup stores, options are in a second arugment:

`js
defineStore(
'id',
() => {
// ...the store

return { someSearch }
},
{
debounce: {
// debounce all someSearch calls by 300ms
someSearch: 300,
},
}
)
`

$3

By default, extra arguments passed to your debounce implementation are not typed. This can be changed by extending the Config interface in any of your ts files:

`ts
import { debounce } from 'ts-debounce'

declare module '@pinia/plugin-debounce' {
export interface Config {
Debounce: typeof debounce
}
}
``

License

MIT