Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 2 months 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 (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-03T19:29:49.000Z (9 months ago)
- Last Synced: 2024-07-16T09:52:10.585Z (2 months ago)
- Topics: pinia, state, vue
- Language: TypeScript
- Homepage: https://wobsoriano.github.io/pinia-shared-state/
- Size: 925 KB
- Stars: 259
- Watchers: 4
- Forks: 13
- Open Issues: 4
-
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. 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).