pinia-shared-state

A lightweight module to 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,
  },
});

You can also share state directly without installing the plugin:

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.

License

MIT License.