手写Pinia存储的数据持久化插件
Pinia和Vuex的通病
Pinia和vuex的通病就是,页面刷新会导致数据丢失
解决通病
一、新建store
import { defineStore } from 'pinia'
//单独存放Store的名字 $id
import { Names } from './store-name'
type User = {
name: string
age: number
}
let res: User = {
name: '孙悟空',
age: 999,
}
const Login = (): Promise<User> => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
name: '孙悟空',
age: 999,
})
}, 2000)
})
}
export const useTestStore = defineStore(Names.TEST, {
state: () => {
return {
user: <User>{},
name: '飞机',
}
},
//类似computed 修饰一些值
getters: {
newName():string {
return `new--${this.name}-${this.getUserAge}`
},
getUserAge():number {
return this.user.age
}
},
// 类似methods 可以同步 异步 提交state
actions: {
setName() {
this.name = '孙悟空'
},
async setUser() {
this.user = await Login()
this.setName()
},
},
})
//base
export const useBaseStore = defineStore(Names.BASE, {
state: () => {
return {
baseCurrent:1
}
}
})
存放store名字的文件
store-names.ts
//存放store的名字
export const enum Names {
TEST = 'TEST',
BASE = 'BASE'
}
二、在main.ts中引入并使用手写的插件
main.ts
import { createApp, toRaw } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/main.css'
import piniaToLocalStoragePlugin from './stores/piniaToLocalStoragePlugin'
const app = createApp(App)
const store = createPinia()
store.use(
piniaToLocalStoragePlugin({
key: 'pinia', // 这是给缓存到本地时,加一个特殊的前缀,以免造成污染到其他缓存数据
needKeepIds: ['BASE','TEST'], // 对于特定store进行持久化,store的名字都在store-names文件中抽离出来了,空或者不传,则对所有的store进行缓存到本地
})
)
app.use(router)
app.use(store)
app.mount('#app')
三、手写的持久化插件
这个就是本文的主角了
piniaToLocalStoragePlugin.ts
import type { PiniaPluginContext } from 'pinia'
import { toRaw } from 'vue'
type Options = {
key: string
needKeepIds?: string[]
}
// 来个持久化存储的函数
const setStorage = (key: string, value: any) => {
localStorage.setItem(key, JSON.stringify(value))
}
// 来个取的函数
const getStorage = (key: string) => {
return localStorage.getItem(key)
? JSON.parse(localStorage.getItem(key) as string)
: {}
}
const __piniaKey__: string = 'piniaKey'
const piniaToLocalStoragePlugin = (options: Options) => {
const { key, needKeepIds = [] } = options
//使用函数柯里化
return (context: PiniaPluginContext) => {
const { store } = context
if (needKeepIds.length === 0) {
//没有指定存全部
// 有个监听是$subscribe 1. 先监听是否改变了store的内容 改变了就存
store.$subscribe(() => {
console.log(' change' )
//无论哪个 state 所有的改变都走这个函数 所以我们可以在这里搞一些动作
setStorage(`${key ?? __piniaKey__}-${store.$id}`, toRaw(store.$state))
})
} else {
//有指定要存哪些
//使用短路运算
needKeepIds.includes(store.$id) &&
store.$subscribe(() => {
setStorage(`${key ?? __piniaKey__}-${store.$id}`, toRaw(store.$state))
})
}
//2. 获取本地存储的localStorage 有就放在页面上
const data = getStorage(`${key ?? __piniaKey__}-${store.$id}`)
// console.log('data', data) //取到data了 怎么送给store呢
return {
...data,
}
}
}
export default piniaToLocalStoragePlugin
手写Pinia存储的数据持久化插件的更多相关文章
- vuex数据持久化插件--指定持久化特定的值
指定需要持久化的state,配置如下 import createPersistedState from "vuex-persistedstate" conststore = new ...
- 手写vue双向绑定数据
来一张原理图: 实现思路: (1)绑定data 种的数据,为每个数据添加指令.通过Object,defineProperty() 来通知属性是否更改 (2) 找到每个DOM节点的指令.绑定事件.并绑定 ...
- 自己手写简约实用的Jquery tabs插件(基于bootstrap环境)
一直想改版网站首页的图书展示部分,以前的展示是使用BootStrap的传统的collapse,网页篇幅占用大,也不够美观,操作也相对来说比较麻烦.于是有了自己利用Jquery来做一个图书展示的tabs ...
- 一阶段项目 总结 之 两张图片对比 手写 jquery 也可以使用beer slider 插件
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title> ...
- vuex-persist数据持久化存储插件
Vuex 解决了多视图之间的数据共享问题.但是运用过程中又带来了一个新的问题是,Vuex 的状态存储并不能持久化.也就是说当你存储在 Vuex 中的 store 里的数据,只要一刷新页面,数据就丢失了 ...
- vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- iOS数据持久化存储:归档
在平时的iOS开发中,我们经常用到的数据持久化存储方式大概主要有:NSUserDefaults(plist),文件,数据库,归档..前三种比较经常用到,第四种归档我个人感觉用的还是比较少的,恰恰因为用 ...
- IOS开发--数据持久化篇之文件存储(一)
前言:个人觉得开发人员最大的悲哀莫过于懂得使用却不明白其中的原理.在代码之前我觉得还是有必要简单阐述下相关的一些知识点. 因为文章或深或浅总有适合的人群.若有朋友发现了其中不正确的观点还望多多指出,不 ...
- 转载 -- iOS数据持久化存储
作者:@翁呀伟呀 授权本站转载 概论 所谓的持久化,就是将数据保存到硬盘中,使得在应用程序或机器重启后可以继续访问之前保存的数据.在iOS开发中,有很多数据持久化的方案,接下来我将尝试着介绍一下5种方 ...
- vuex数据持久化存储
想想好还是说下vuex数据的持久化存储吧.依稀还记得在做第一个vue项目时,由于刚刚使用vue,对vue的一些基本概念只是有一个简单的了解.当涉及到非父子组件之间通信时,选择了vuex.只是后来竟然发 ...
随机推荐
- P3402 可持久化并查集
P3402 通过主席树维护不同版本的并查集,注意要采用按秩合并的方式,路径压缩可能会爆. 1 #include <bits/stdc++.h> 2 using namespace std; ...
- BZOJ3732 Network(Kruskal重构树)
Kruskal重构树的模板题. 给你N个点的无向图 (1 <= N <= 15,000),记为:1-N.图中有M条边 (1 <= M <= 30,000) ,第j条边的长度为: ...
- 陆地观测卫星数据服务(CRESDA)订单ftp地址错误—已解决不能下载问题
陆地观测卫星数据服务订单ftp地址错误 问题:本人在陆地观测卫星数据网站上申请GF1-WFV10幅数据,订单完成后返回的FTP地址出现无法连接服务器现象.(数据订单申请已通过) 一.情况介绍: 我 ...
- 通过linux-PAM实现禁止root用户登陆的方法
前言 在linux系统中,root账户是有全部管理权限的,一旦root账户密码外泄,对于服务器而言将是致命的威胁:出于安全考虑,通常会限制root账户的登陆,改为配置普通用户登陆服务器后su切换到ro ...
- 《吐血整理》高级系列教程-吃透Fiddler抓包教程(28)-Fiddler如何抓取Android7.0以上的Https包-下篇
1.简介 虽然依旧能抓到大部分Android APP的HTTP/HTTPS包,但是别高兴的太早,有的APP为了防抓包,还做了很多操作:① 二次加密有的APP,在涉及到关键数据通信时,会将正文二次加密后 ...
- Vue学习之--------深入理解Vuex之模块化编码(2022/9/4)
在以下文章的基础上 1.深入理解Vuex.原理详解.实战应用:https://blog.csdn.net/weixin_43304253/article/details/126651368 2.深入理 ...
- 一天五道Java面试题----第六天(1)
这里是参考B站上的大佬做的面试题笔记.大家也可以去看视频讲解!!! 文章目录 1.mybatis和hibernate的对比 2 .#{}和${}的区别 3 .mybatis插件运行原理及开发流程 4 ...
- HTML基础知识(3)浮动、塌陷问题
1.浮动 1.1 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
- .net core -利用 BsonDocumentProjectionDefinition 和Lookup 进行 join 关联 MongoDB 查询
前序 前段时间由于项目需要用到MongoDB,但是MongoDB不建议Collection join 查询,网上很多例子查询都是基于linq 进行关联查询.但是在stackoverflow找到一个例 ...
- windows下cmd补全键注册表修改
1:使用win+r打开 运行 控制台 2:输入 regedit 打开注册表 3:进入HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Command Processor\ ...