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

npm install @pinia/plugin-debounce

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

Usage

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:

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:

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

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

Extended TypeScript support

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:

import { debounce } from 'ts-debounce'

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

License

MIT