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: about 1 month 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 (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-01-03T19:29:49.000Z (5 months ago)
• Last Synced: 2024-01-08T08:50:21.706Z (5 months ago)
• Topics: pinia, state, vue
• Language: TypeScript
• Homepage: https://wobsoriano.github.io/pinia-shared-state/
• Size: 925 KB
• Stars: 233
• Watchers: 4
• Forks: 10
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Lists

• awesome-vue - pinia-shared-state - A lightweight plugin to sync your pinia state across browser tabs. (Components & Libraries / Utilities)
• awesome-vue - pinia-shared-state - A lightweight plugin to sync your pinia state across browser tabs. (Components & Libraries / Utilities)
• awesome-vue - pinia-shared-state - A lightweight plugin to sync your pinia state across browser tabs. (Components & Libraries / Utilities)
• awesome-stars - wobsoriano/pinia-shared-state - 🍍 Sync your Pinia state across browser tabs. (TypeScript)

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. Supports Vue 2 and 3.

## Requirements

- vue ^2.6.14 || ^3.2.0

## Install

```sh

pnpm add pinia 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 { onMounted, onUnmounted } from 'vue'

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

import useStore from './store'

const counterStore = useStore()

onMounted(() => {

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

  onUnmounted(() => {

    // Call `unshare` method to close the channel

    unshare()

  })

})

```

## Credits

- [pinia](https://pinia.esm.dev/) - 🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support.

- [vue-demi](https://github.com/vueuse/vue-demi/) - Creates Universal Library for Vue 2 & 3.

- [broadcast-channel](https://github.com/pubkey/broadcast-channel) - BroadcastChannel to send data between different browser-tabs or nodejs-processes.

## License

[MIT License](http://opensource.org/licenses/MIT).