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

🍍 Sync your Pinia state across browser tabs.
https://github.com/wobsoriano/pinia-shared-state

pinia state vue

Last synced: 2 days ago
JSON representation

🍍 Sync your Pinia state across browser tabs.

• Host: GitHub
• URL: https://github.com/wobsoriano/pinia-shared-state
• Owner: wobsoriano
• License: mit
• Created: 2021-08-08T15:34:54.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-01-03T19:29:49.000Z (about 1 year ago)
• Last Synced: 2025-02-12T14:09:48.568Z (9 days ago)
• Topics: pinia, state, vue
• Language: TypeScript
• Homepage: https://wobsoriano.github.io/pinia-shared-state/
• Size: 925 KB
• Stars: 277
• Watchers: 3
• Forks: 16
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# pinia-shared-state

[![npm (tag)](https://img.shields.io/npm/v/pinia-shared-state?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/pinia-shared-state) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/pinia-shared-state?style=flat&colorA=000000&colorB=000000) ![NPM](https://img.shields.io/npm/l/pinia-shared-state?style=flat&colorA=000000&colorB=000000)

Sync your Pinia state across browser tabs.

## Requirements

- vue ^3.5.11

## Install

```sh

npm install pinia-shared-state

```

## Usage

```js

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',

  }),

)

```

```js

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:

```ts

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

import { onMounted, onUnmounted } from 'vue'

import useStore from './store'

const counterStore = useStore()

onMounted(() => {

  const { unshare } = share('counter', counterStore, { initialize: true })

  onUnmounted(() => {

    // Call `unshare` method to close the channel

    unshare()

  })

})

```

## License

MIT