pinia-plugin-persistedstate
Pinia 存储的可配置持久化和状态恢复。
功能
- 使用受
vuex-persistedstate启发的友好 API 持久化 Pinia 存储。 - 高度可定制（存储、序列化器、路径选择/省略）。
- 对
Nuxt提供开箱即用的 SSR 友好支持。 - 非常小巧（压缩后小于 2KB）。
快速入门
- 使用您喜欢的包管理器安装
- pnpm :
pnpm add pinia-plugin-persistedstate - npm :
npm i pinia-plugin-persistedstate - yarn :
yarn add pinia-plugin-persistedstate
- pnpm :
- 将插件添加到 pinia
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
- 为您想要持久化的存储添加
persist选项
import { defineStore } from 'pinia'
export const useStore = defineStore('store', {
state: () => ({
someState: 'hello pinia',
}),
persist: true,
})
配置
您可以通过为 persist 属性指定选项来配置存储的持久化方式
export const useStore = defineStore('store', () => {
const someState = ref('hello pinia')
return { someState }
}, {
persist: {
storage: sessionStorage,
pick: ['someState'],
},
})
所有可用的配置选项都在此处解释。
与 Nuxt 一起使用
由于包含的模块，Nuxt 支持是开箱即用的。您只需安装包并将模块添加到您的 nuxt.config.ts，如下所示
export default defineNuxtConfig({
modules: [
'@pinia/nuxt', // required
'pinia-plugin-persistedstate/nuxt',
],
})
有关 Nuxt 中存储和配置的更多信息，请在此处查看。
限制
有几个限制需要考虑，更多信息请在此处查看。
贡献
请参阅贡献指南。