vue3中pinia使用持久化管理

安装插件

npm install pinia pinia-plugin-persist

pinia进行注册

创建index.ts

import { createPinia } from 'pinia';
//对外暴露大仓库
export default createPinia();

在mian.ts

//引入pinpa
import { createApp } from 'vue'
//引入根组件
import App from './App.vue'
const app = createApp(App)
import Pinia from './store/index'
//注册Pinpa持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
Pinia.use(piniaPluginPersistedstate)
app.use(Pinia)
app.mount('#app')

调用

import {defineStore} from 'pinia'
import {reqCode,reqUserLogin} from '../../api/hospital/index'
import {PhoneTy} from '../../api/hospital/type'
const useUserStore = defineStore('User',{state:()=>{return{visiable: false,//用于控制登录组件的dialog显示与隐藏code: '',//存储用户的验证码,//存储用户的信息userInfo:JSON.parse(localStorage.getItem('USERINFO') as string) || {}}},actions:{//获取短信验证async  getCode(value:string){const r:PhoneTy = await reqCode(value) as anyif(r.code == 200){this.code = r.data// console.log(this.code,'this.code1')}console.log(this.code,'this.code2')},//登陆用户async reqUserLogin(value:object){const r = await reqUserLogin(value)this.userInfo = r.data//   localStorage.setItem('USERINFO',JSON.stringify(this.userInfo))console.log(r)}},// 在这里进行自定义配置persist: {key:'USERINFO', // 存储的key, 默认store.$id// storage: sessionStorage, // 存储的类型,默认localStoragepaths:['userInfo']// 指定 state 中哪些数据需要被持久化, 默认undefined}})
export default useUserStore

即使是对象数组,也可以直接放进去,不需要JSON转换

取值的话需要转换

userInfo:JSON.parse(localStorage.getItem('USERINFO') as string) || {}

使用的话正常和存储在本地一样调用就行

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/41157.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

渲染农场渲染真的很贵吗?如何正确使用云渲染农场?

作为渲染行业主流的技术服务“渲染农场",一直都是备受大家关注,渲染农场最核心的在于充足的计算机算力,结合3D软件支持多台机器渲染的特点,租用渲染农场的机器帮助你快速的解决你的渲染项目。 虽然说渲染农场需要支付一定的…

vue3 滚动条滑动到元素位置时,元素加载

水个文 效果 要实现的思路就是,使用IntersectionObserver 检测元素是否在视口中显示,然后在通过css来进行动画载入。 1.监控元素是否视口中显示 const observer new IntersectionObserver((entries) > {entries.forEach((entry) > {if (entry.i…

视频技术助力智慧城市一网统管:视频资源整合与智能化管理

随着信息技术的飞速发展,智慧城市已成为现代城市发展的重要方向。在智慧城市建设中,一网统管作为城市管理的重要策略,通过整合各类信息资源,实现资源的优化配置和问题的快速响应。其中,视频技术作为一网统管场景中的关…

与Flat Ads相约ChinaJoy 2024,共探全球化增长

在当今全球数字化浪潮的推动下,游戏产业作为文化与技术融合的先锋,正以前所未有的速度跨越国界,开启全球化发展的新篇章。随着第二十一届ChinaJoy的临近,全球的目光再次聚焦于上海新国际博览中心,这里即将成为数字娱乐与科技创新碰撞与交融的璀璨舞台。 而在这场盛会上,Flat A…

安装Nginx以及简单使用 —— windows系统

一、背景 Nginx是一个很强大的高性能Web和反向代理服务,也是一种轻量级的Web服务器,可以作为独立的服务器部署网站,应用非常广泛,特别是现在前后端分离的情况下。而在开发过程中,我们常常需要在window系统下使用Nginx作…

光耦合器的未来概述

光耦合器也称为光隔离器,长期以来一直是电子系统中必不可少的组件,其中输入和输出电路之间的隔离至关重要。从工业自动化到消费电子产品,它们在电气隔离输入和输出侧的同时传输信号的能力使它们变得不可或缺。随着技术的不断发展,…

docker也能提权??内网学习第6天 rsync未授权访问覆盖 sudo(cve-2021-3156)漏洞提权 polkit漏洞利用

现在我们来说说liunx提权的操作:前面我们说了环境变量,定时任务来进行提权的操作 rsync未授权访问覆盖 我们先来说说什么是rsync rsync是数据备份工具,默认是开启的873端口 我们在进行远程连接的时候,如果它没有让我们输入账号…

震惊!张宇25版高数18讲发布,656页惹争议!

这个张宇老师在微博已经解释过了! 我觉得张宇老师本意是好的,在考研数学教学创新这方面,他真的有自己的思考。 他为什么要这么做? 其实作为一个考研高数老师,他完全可以像其他老师一样,什么都不做&#x…

pip install包出现哈希错误解决

如图,当遇到此类错误时,多半是连接不稳定导致的校验失败。我们可以在PC端,或Ubuntu通过浏览器下载.whl安装文件:直接复制报错信息中的网址到浏览器即可弹出下载窗口。

SolidWorks教育版:促进师生互动的桥梁

在当今教育领域,技术的融合正改变着传统的教学方式。SolidWorks教育版作为一款专为教育机构和学生设计的三维设计软件,不仅以其强大的功能和易用的界面赢得了广泛赞誉,更在促进师生互动方面发挥了重要作用。本文将探讨SolidWorks教育版如何成…

OCC显示渲染性能分析及优化方案

1.背景介绍 君方智能设计平台(ShipMaker),使用OCC中的图形构造功能和图形渲染功能。OCC的图形渲染采用Opengl API 并且将所有图形渲染相关的逻辑放置在TKOpenGL模块中。 性能场景1: 大场景中包含2万个构件,超过300万三角面片时,…

四川赤橙宏海商务信息咨询有限公司引领抖音电商浪潮

在数字时代的浪潮下,电商行业飞速发展,抖音电商作为新兴的电商模式,凭借其独特的社交属性和短视频形式,迅速吸引了众多消费者和商家的目光。四川赤橙宏海商务信息咨询有限公司,作为抖音电商服务的佼佼者,凭…

通过端口和进程pid查找启动文件/脚本

今天审计一个程序又让GPT给我上了一课,记一下笔记: 1、首先该程序开启了8080端口,使用如下命令得到pid为1817 netstat -tunlp|grep 80802、使用pid得到父进程 pstree -ps 1817输出结果如下: 3、看出程序是由systemd启动的&…

通用代码生成器模板体系,语句和语句组

通用代码生成器或者叫动词算子式通用目的代码生成器是一组使用Java编写的通用代码生成器。它们的原理基于动词算子和域对象的笛卡尔积。它们没有使用FreeMarker和或者Velocity等现成的文件式模板引擎。而是使用java语言开发了一套专门为动词算子式代码生成器使用的模板API。而其…

工业互联网之智能工厂的特征。

哈喽,你好啊!我是雷工! 随着科技的发展,在数字信息的浪潮下现代工业体系和互联网体系深度融合产生了工业互联网。 工业互联网通过连接企业、设备、原材料、人、信息系统构建了基础网络,从而促进工业技术的数字化、网…

4-google::protobuf命名空间下常用的C++ API----text_format.h

#include <google/protobuf/text_format.h> namespace google::protobuf 用于以人类可读的基于文本的格式打印和解析协议消息的工具类。 TextFormat类 这个类实现协议缓冲文本格式。 以文本格式打印和解析协议消息对于调试和人工编辑消息非常有用。 这个类实际上是一个只…

14-29 剑和诗人3 – 利用知识图谱增强 LLM 推理能力

知识图谱提供了一种结构化的方式来表示现实世界的事实及其关系。通过将知识图谱整合到大型语言模型中&#xff0c;我们可以增强它们的事实知识和推理能力。让我们探索如何实现这一点。 知识图谱构建 在利用知识图谱进行语言模型增强之前&#xff0c;我们需要从可靠的来源构建…

Zerotier+Parsec五分钟实现外网远程访问校园或公司内网

0 需求 校园网或公司内网是不能直接通过远程控制桌面软件访问的&#xff0c;想要实现&#xff0c;就必须通过三方的服务来实现穿透内网。但是这样的缺点就是存在延迟。 1 安装软件 &#xff08;1&#xff09;Zerotier 是内网穿透软件&#xff0c;在两台设备上都要安装&#…

从0开始搭建Spring-Cloud微服务项目

文章目录 1. 安装Java开发环境配置环境变量 2. MySQL安装与配置环境变量配置配置MySQLNavicat配置Idea配置 1. 安装Java开发环境 安装Java开发环境主要涉及下载Java开发工具包&#xff08;JDK&#xff09;并配置环境变量&#xff0c;以便在系统中正确运行Java程序。 下载JDK …

Python函数缺省参数的 “ 坑 ” (与C++对比学习)

我们都知道Python函数的缺省参数可以降低我们调用函数的成本&#xff0c;但是一般我们的缺省参数都是不可变对象&#xff0c;如果是可变对象&#xff0c;我们对其多次调用会发生什么呢&#xff1f; def func(arr[]):arr.append(Hello)print(arr)func() func() func() 这貌似…