Pinia-shared-state NPM

pinia-shared-state

npm bundle size NPM

Sync your Pinia state across browser tabs. Supports Vue 2 and 3.

Requirements

vue ^2.6.14 || ^3.2.0

Install

pnpm add pinia pinia-shared-state

Usage

import { PiniaSharedState } from 'pinia-shared-state'

// Pass the plugin to your application's pinia plugin
pinia.use(
  PiniaSharedState({
    // Enables the plugin for all stores. Defaults to true.
    enable: true,
    // If set to true this tab tries to immediately recover the shared state from another tab. Defaults to true.
    initialize: false,
    // Enforce a type. One of native, idb, localstorage or node. Defaults to native.
    type: 'localstorage',
  }),
)

const useStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0,
    foo: 'bar',
  }),
  share: {
    // An array of fields that the plugin will ignore.
    omit: ['foo'],
    // Override global config for this store.
    enable: true,
    initialize: true,
  },
})

Vanilla usage:

import { onMounted, onUnmounted } from 'vue'
import { share, unshare } from 'pinia-shared-state'
import useStore from './store'

const counterStore = useStore()

onMounted(() => {
  share('counter', counterStore, { initialize: true })
})

onUnmounted(() => {
  // Call `unshare` method to close the channel
  unshare()
})

Credits

pinia - 🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support.
vue-demi - Creates Universal Library for Vue 2 & 3.
broadcast-channel - BroadcastChannel to send data between different browser-tabs or nodejs-processes.