大菠萝 Pinia 持久化方案 Pinia Persist Own

在使用 Pinia 时，一直想找到一个可以持久化的插件，不过用了很多都不是很理想，所以抽空的时候，自己写了一个。

安装

# npm
npm i pinia-persist-own
# pnpm
pnpm add pinia-persist-own

使用

store.js

import { persist, createPersist } from 'pinia-persist-own'
import { createPinia } from 'pinia'const pinia = createPinia()// 这里传入的是公共参数，每个 store 均共享此参数
const createPersist = persist(/* 可进行传递通用参数 */)/*** 如果不想进行统一设置参数的话，可以直接使用导出的 'createPersist' * 每个 store 均可以进行单独进行配置，单独的配置要优先于公用配置* */// 添加持久化
pinia.use(createPersist)app.use(pinia)

通用参数

类型： Object

options = { // 使用何种方式进行持久化, 默认: sessionStoragestorage: window.sessionStorage// 持久化时，是否启用加密，需自行加密, 默认: false// 当 useCrypt 为 true 时，加密解密方法必传useCrypt: false,// 加密数据方法encrypt: (data /* 待加密数据 */) => {// 加密实现},decrypt: (secretData) => {// 解密实现}}

私有参数

import { defineStore } from 'pinia' interface PersistProps{// 持久化名称name?: string;// 需要进行单独持久化的 keys => state 中的 key 集合keys?: string[];// 持久化方式，localStorage 和 sessionStorage // 或者自行实现，自行实现 Storage 时，注意要实现的方法storage?: Storage;// 是否使用加密进行存储useCrypt?: false;// 加密方法encrypt?: (data: string) => string;// 解密方法decrypt?: (secretData: string) => string;
}const useStore = defineStore('default-store', {// 是否启用持久化，传入 true/[] 均可，表示使用公用参数进行持久化persist: boolean | PersistProps[]state,getters,actions
})

完整示例

// store/index.ts
import type { App } from 'vue';
import { createPinia } from 'pinia';
import { createPersist } from 'pinia-persist-own';const store = createPinia();
store.use(createPersist);// store/modules/app.ts
interface AppState {reloadFlag: boolean;userInfo: UserInfo;token: string;auth: string;role: string[];
}
export const useAppStore = defineStore('app-store', {persist: true,// orpersist: [{name: 'custom',storage: localStorage,keys: ['userInfo', 'token'],useCrypt: true,encrypt: code => fnEncrypt(code),decrypt: decode => fnDecrypt(decode)},{name: 'other',storage: Cookie,keys: ['auth', 'role']}],state: (): AppState => ({reloadFlag: true}),actions: {setReload(isReload: boolean) {this.reloadFlag = isReload;},}
});

大菠萝 Pinia 持久化方案 Pinia Persist Own相关推荐

Vue3大菠萝pinia笔记
pinia的基本特点 pinia同样是一个Vue 状态管理工具,它和vuex有很多相似的地方.本质上他是vuex团队核心成员开发的,在vuex上面提出了一些改进.与vuex相比,pinia去除了vue ...
redis持久化方案
说到redis的持久化,可以先说redis的高可用,而保证其高可用的手段有------持久化.复制.哨兵.集群. 持久化:数据的备份,将数据存入硬盘保证数据不会因进程退出而丢失. 复制:是哨兵和集群的 ...
redis持久化方案比较
redis持久化包括rdb和aof两种方案 1.rdb持久化方案持久化过程:按照redis.conf文件配置,如 save 900 1 save 300 10 save 60 10000 ,在指定时 ...
redis数据丢失_有效避免数据丢失！Redis持久化方案选择详解
为什么需要持久化呢? 通常情况下redis的数据全部存储在内存中,数据库一旦故障发生重启数据会全部丢失,即使是在redis cluster或者redis sentinel模式下主从同步数据的恢复仍然需 ...
（转）淘淘商城系列——Redis持久化方案
http://blog.csdn.net/yerenyuan_pku/article/details/72858975 Redis中设置key的过期时间 Redis中的expire命令用于设置key的 ...
星环科技自研技术，加速大数据从持久化、统一化、资产化、业务化到生态化
从2013年成立开始,星环科技就专注于大数据基础技术与企业数据业务的更好结合,同时面对中国更为复杂的数据应用场景,研发了多种更贴合国内大数据应用需求的大数据管理技术,在大数据技术领域有多项基础技术突破 ...
(转)iOS应用架构谈本地持久化方案及动态部署
原文链接:http://casatwy.com/iosying-yong-jia-gou-tan-ben-di-chi-jiu-hua-fang-an-ji-dong-tai-bu-shu.html ...
淘淘商城——Redis持久化方案
Redis中设置key的过期时间 Redis中的expire命令用于设置key的过期时间,以毫秒计.key过期后将不再可用.Redis中的expire命令基本语法如下: expire key seco ...
Redis的持久化方案
Redis 持久化策略浅析 (qq.com) Redis的持久化方案 Redis 是内存数据库,数据都是存储在内存中,为了避免进程退出导致数据的永久丢失,需要定期将 Redis 中的数据以某种形式(数 ...

大菠萝 Pinia 持久化方案 Pinia Persist Own

安装

使用

通用参数

私有参数

完整示例

大菠萝 Pinia 持久化方案 Pinia Persist Own相关推荐

最新文章

热门文章