https://github.com/posva/pinia-plugin-debounce
Config-based action debouncing made easy
https://github.com/posva/pinia-plugin-debounce
Last synced: about 1 year ago
JSON representation
Config-based action debouncing made easy
- Host: GitHub
- URL: https://github.com/posva/pinia-plugin-debounce
- Owner: posva
- License: mit
- Created: 2021-08-06T12:37:02.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-10-21T03:58:48.000Z (over 1 year ago)
- Last Synced: 2024-10-21T06:56:43.567Z (over 1 year ago)
- Language: TypeScript
- Size: 818 KB
- Stars: 66
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/funding.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
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](https://lodash.com/docs/4.17.15#debounce) or [ts-debounce](https://github.com/chodorowicz/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,
},
}
)
```
### 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:
```ts
import { debounce } from 'ts-debounce'
declare module '@pinia/plugin-debounce' {
export interface Config {
Debounce: typeof debounce
}
}
```
## License
[MIT](http://opensource.org/licenses/MIT)