在 Nuxt 中使用

该软件包 pinia-plugin-persistedstate 附带一个 Nuxt 模块，可提供开箱即用的 SSR 友好体验。

安装

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

pnpm

pnpm add pinia-plugin-persistedstate

npm

npm i pinia-plugin-persistedstate

yarn

yarn add pinia-plugin-persistedstate

1. 将模块添加到 Nuxt 配置中：

nuxt.config.ts

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

用法

在声明您的存储时，将新的 persist 选项设置为 true。

setup syntax

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('hello pinia')
    return { someState }
  },
  {
    persist: true,
  },
)

option syntax

import { defineStore } from 'pinia'

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

预配置

Nuxt 模块预配置了以下内容：

• cookies 作为存储。
• store.$id 作为 storage 的默认 key。
• JSON.stringify/destr 作为序列化器/反序列化器。
• 整个状态将持久化到存储中。

选择存储

您可以通过使用自动导入的 piniaPluginPersistedstate 变量下的可用存储来配置要使用的存储。

警告

使用 persistedState 公开的存储之外的其他存储可能会出现意外行为。

cookies

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: 'hello pinia',
    }
  },
  persist: {
    storage: piniaPluginPersistedstate.cookies(),
  },
})

提示

persistedState.Cookies 方法接受一个对象参数来配置带有以下选项的cookie(从Nuxt的 useCookie 继承而来):

• domain
• expires
• httpOnly
• maxAge
• partitioned
• path
• sameSite
• secure

localStorage

import { defineStore } from 'pinia'

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

警告

localStorage 仅限客户端。

sessionStorage

import { defineStore } from 'pinia'

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

警告

sessionStorage 仅限客户端。

全局选项

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

• cookieOptions
• debug
• key
• storage

NOTE

全局存储选项仅接受预配置存储 ('cookies', 'localStorage', 'sessionStorage')的字符串值。 这是由于 Nuxt 将 模块选项传递给运行时的方式。

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
    'pinia-plugin-persistedstate/nuxt'
  ],
  piniaPluginPersistedstate: {
    storage: 'cookies',
    cookieOptions: {
      sameSite: 'lax',
    },
    debug: true,
  },
})

全局密钥

您可以为全局使用的前缀/后缀键提供模板字符串。提供的密钥必须包含令牌 %id ,该令牌将被相应的存储id替换。

nuxt.config.ts

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

任何以 my-store 作为持久key(用户提供或从商店id推断)的商店都将在 prefix_my-store_postfix key下持久化。