Skip to content

Gumball12/pinia-plugin-watch

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

14 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿ pinia-plugin-watch

npm bundle size npm npm changelog

ci publish codecov

logo

A plugin that allows you to monitor and react to changes in your store's state deeply.

Supports Pinia v2. (Vue 2 and 3)

๐Ÿš€ Quick Start

1. Install the plugin

npm i pinia-plugin-watch
yarn add pinia-plugin-watch # yarn
pnpm add pinia-plugin-watch # pnpm

2. Using the plugin in Pinia

import { createPinia } from 'pinia';
import { WatchPiniaPlugin } from 'pinia-plugin-watch';

const pinia = createPinia();
pinia.use(WatchPiniaPlugin);

3. Watch the state

import { defineStore } from 'pinia';

const useStore = defineStore('store', {
  state: () => ({
    count: 0,
    user: {
      name: 'John',
      age: 20,
    },
  }),

  // PiniaPluginWatch
  watch: {
    // Watch `count`
    count: (newValue, oldValue, onCleanup, store) => {
      console.log('count changed', newValue, oldValue);
    },

    // Watch `user` and `user.name`
    user: {
      handler: (newValue, oldValue, onCleanup, store) => {
        console.log('user changed', newValue, oldValue);
      },
      children: {
        name: (newValue, oldValue, onCleanup, store) => {
          console.log('user.name changed', newValue, oldValue);
        },
      },
    },
  },
});

For usage examples, see the Usage documentation.

๐ŸŒฎ API

options.watch

  • Type: Record<string, WatchHandler | WatchOptions>

WatchHandler

  • Type: <T>(newValue: T, oldValue: T) => void

WatchOptions

  • Type: Record<string, WatchHandler | WatchOptions>
  • Properties:
    • handler: WatchHandler
    • children?: Record<string, WatchHandler | WatchOptions>
    • deep?: boolean (default: true)

store.$watch

  • Type: typeof options.watch

The watch option is copied to the $watch property of the store.

License

MIT