Pinia 持久化外掛
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 中儲存和配置的更多資訊，請參閱此處。
侷限性
需要考慮一些限制，更多資訊請參閱此處。
貢獻
請參閱貢獻指南。
許可證
MIT © 2021-至今 Sacha Bouillez