Pinia Shared State 使用教程

Pinia Shared State 使用教程

pinia-shared-state 🍍 Sync your Pinia state across browser tabs. 项目地址: https://gitcode.com/gh_mirrors/pi/pinia-shared-state

1. 项目介绍

Pinia Shared State 是一个用于在 Vue 3 应用中跨浏览器标签同步 Pinia 状态的插件。它允许开发者通过简单的配置，就可以在多个标签页之间共享状态，比如用户偏好设置或者购物车内容。

2. 项目快速启动

首先，确保你的项目已经安装了 Pinia。

npm install pinia

然后，安装 Pinia Shared State 插件：

npm install pinia-shared-state

在你的 Pinia 插件配置中引入并使用 PiniaSharedState：

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

const pinia = createPinia()
pinia.use(PiniaSharedState({
  enable: true,
  initialize: false,
  type: 'localstorage'
}))

app.use(pinia)

定义你的 store，并配置需要共享的状态：

import { defineStore } from 'pinia'

export const useStore = defineStore('counter', {
  state: () => ({
    count: 0,
    foo: 'bar'
  }),
  share: {
    omit: ['foo'],
    enable: true,
    initialize: true
  }
})

3. 应用案例和最佳实践

跨标签页状态同步

在一个多标签页应用中，你可能希望用户的购物车在各个标签页中保持一致。通过 Pinia Shared State，你可以轻松实现这一点。

const cartStore = useStore('cart')

cartStore.addItemToCart(item)

在其他标签页中，相同的 cartStore 会自动同步购物车状态。

状态初始化

如果你的应用在启动时需要从其他标签页恢复状态，可以设置 initialize: true 来实现自动初始化。

pinia.use(PiniaSharedState({
  // ...
  initialize: true
}))

4. 典型生态项目

Pinia Shared State 可以与 Vue 3 和 Pinia 生态系统中的其他项目配合使用，例如：

• Vue Router：在路由变化时同步状态。
• Vuex：与 Vuex 共同使用，为 Vuex store 提供跨标签页同步功能。
• Nuxt 3：在 Nuxt 3 应用中实现状态同步。

通过结合这些项目，你可以构建更加丰富和协作性强的应用。

pinia-shared-state 🍍 Sync your Pinia state across browser tabs. 项目地址: https://gitcode.com/gh_mirrors/pi/pinia-shared-state