Pinia持久化存储

  (转载请附上原文出处链接:Pinia持久化存储-优快云博客)

npm i pinia-plugin-persistedstate  //版本 ^4.1.1

main.js文件

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' //引入持久化插件

app.use(createPinia().use(piniaPluginPersistedstate))

使用   

Configuration | Pinia Plugin Persistedstate

{
    persist: {
        key: 'testStore', //存储名称
        storage: sessionStorage, // 存储方式
        //指定 state 中哪些数据需要被持久化。[] 表示不持久化任何状态,undefined 或 null 表示持久化整个 state
        pick: ['userId'],
    }
}

### Pinia 持久化存储概念 PiniaVue 应用程序的状态管理库,允许开发者通过 Store 来集中管理和共享应用程序的状态。为了确保应用状态在页面刷新或关闭后再打开时仍然可用,Pinia 支持持久化存储功能。 #### 持久化存储的作用 持久化存储意味着将 Store 中的部分或全部状态保存到浏览器的本地存储中(如 `localStorage` 或 `sessionStorage`)。当用户重新加载页面或再次访问网站时,可以从这些存储位置恢复之前的状态[^1]。 #### 实现方式 可以通过插件来扩展 Pinia 的功能以支持持久化特性。例如,在创建 Pinia 实例时传入特定配置对象: ```javascript // store.js import { createPinia } from 'pinia' import piniaPluginPersist from 'pinia-plugin-persist' const pinia = createPinia() pinia.use(piniaPluginPersist({ storage: localStorage, // 使用localStorage作为默认存储介质 paths: ['myStoreName'], // 只对名为'myStoreName'的store启用持久化 ttl: 60 * 60 * 24 // 设置数据的有效期为一天(单位:秒) })) export default pinia ``` 对于单个 Store 而言,则可以直接在其定义过程中开启持久化选项: ```typescript // counter.store.ts import { defineStore } from 'pinia'; export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), getters: { doubleCount(): number { return this.count * 2; }, }, actions: { increment() { this.count++; } }, persist: true // 启用此store的持久化机制 }); ``` 上述代码片段展示了如何利用 Pinia 插件轻松实现简单的持久化需求。当然还可以进一步定制更多高级设置,比如更改使用的存储类型、调整缓存过期策略等[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值