Sync Pinia State Across Browser Tabs In Vue - pinia-shared-state

Install & Download:

# NPM
$ npm i pinia-shared-state

Description:

A lightweight Vue 2 & Vue 3 module to sync your pinia state across browser tabs.

How to use it:

1. Import the PiniaSharedState.

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

2. Basic usage.

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,
  },
});

3. You can also share Pinia 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();
});