pinia-shared-state

[wobsoriano]

Hi everyone. Published a lightweight module to sync your pinia state across browser tabs. It supports Vue 2 and 3.

Try the demo with different tabs: https://wobsoriano.github.io/pinia-shared-state/

Usage is simple:

import { defineStore } from 'pinia'
import { share, isSupported } from 'pinia-shared-state'

const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({ count: 0 })
})

const counterStore = useCounterStore()

if (isSupported()) {
    // share the property "count" of the state with other tabs.
    share('count', counterStore)
}

https://github.com/wobsoriano/pinia-shared-state

[posva]

Nice! What about a different api by exporting a plugin, that allows you to define the share option within the store:

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


pinia.use(SharedState({
  initialize: true,
  ref: (stateName) => `shared-store:${stateName}`
}))

const useStore = defineStore('count', {
  state: () => ({ n: 0 }),
  // simple array syntax
  share: ['n']
})

const useStore = defineStore('count', {
  state: () => ({ n: 0, other: 'foo' }),
  // with custom options
  share: {
    n: true, // same as array
    other: { initialize: false }, // override the global option
  }
})

This could come in handy: https://github.com/posva/pinia-plugin-debounce

[wobsoriano]

Awesome! That actually looks a lot better :D

[wobsoriano]

Made it a plugin thanks to @posva .

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

Override per store

defineStore({
  id: 'counter',
  state: () => ({
      count: 0,
      foo: 'bar'
  }),
  share: {
      // An array of fields that the plugin will ignore.
      omit: ['foo'],
      initialize: true
  }
});

[moom-en]

Override per store, How to use by setup store