pinia-plugin-watch

🍍 pinia-plugin-watch

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