在 Nuxt 3 中使用

我们提供的专用模块使得在 Nuxt 中持久化 Pinia Store 变得更加容易。

安装

1. 使用你喜欢的包管理器安装依赖：

pnpm

pnpm i -D @pinia-plugin-persistedstate/nuxt

npm

npm i -D @pinia-plugin-persistedstate/nuxt

yarn

yarn add -D @pinia-plugin-persistedstate/nuxt

2. 将模块添加到 Nuxt 配置中 (nuxt.config.ts)：

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt',
  ],
})

用法

创建 Store 时，将 persist 选项设置为 true。

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: '你好 pinia',
    }
  },
  persist: true,
})

选择 storage

默认情况下，你的 Store 将被保存在 cookie 中（在底层使用 Nuxt 的 useCookie）。你可以通过使用自动导入的 persistedState 变量下的可用 storage 来配置你想要使用的 storage。

提示

使用 persistedState 所提供的 storage 以外的其他 storage 可能会导致意外。

localStorage

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: '你好 pinia',
    }
  },
  persist: {
    storage: persistedState.localStorage,
  },
})

警告

localStorage 仅限客户端。

sessionStorage

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: '你好 pinia',
    }
  },
  persist: {
    storage: persistedState.sessionStorage,
  },
})

警告

sessionStorage 仅限客户端。

cookiesWithOptions

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: '你好 pinia',
    }
  },
  persist: {
    storage: persistedState.cookiesWithOptions({
      sameSite: 'strict',
    }),
  },
})

提示

使用 cookiesWithOptions() 允许你配置 cookies。不传递任何选项将默认与使用 cookies 相同。

全局配置

该模块接受在 piniaPersistedstate 下定义在 nuxt.config.ts 中的一些选项

export default defineNuxtConfig({
  modules: ['@pinia/nuxt', '@pinia-plugin-persistedstate/nuxt'],
  piniaPersistedstate: {
    cookieOptions: {
      sameSite: 'strict',
    },
    storage: 'localStorage',
  },
})

• storage：持久化默认使用的 storage ('localStorage', 'sessionStorage' 或 'cookies')。
• cookieOptions：默认 cookie 选项（仅在使用 cookie 持久化时可用）。
• debug：详见 debug.