当前位置: 首页 > news >正文

11vue3实战-----封装缓存工具

11vue3实战-----封装缓存工具

  • 1.背景
  • 2.pinia的持久化思路
  • 3.以localStorage为例解决问题
  • 4.封装缓存工具

1.背景

在上一章节,实现登录功能时候,当账号密码正确,身份验证成功之后,把用户信息保存起来,是用的pinia。然而pinia一刷新之后内部的数据(比如token)就会消失。为了解决该问题,必须将pinia持久化。

2.pinia的持久化思路

常见的解决方法有sessionStorage和localStorage,大家可以根据公司的需求来选择。两种方法都能保证刷新时候pinia内部数据依然存在,只不过使用sessionStorage这种方法,当关闭浏览器的会话时候,数据会消失。

3.以localStorage为例解决问题

store/login/login.ts:

import { defineStore } from 'pinia'
import { accountLoginRequest } from '@/service/login/login'
import type { IAccount } from '@/types'
const useLoginStore = defineStore('login', {state: () => ({id: '',token: localStorage.getItem('token') ?? '',name: ''}),actions: {async loginAccountAction(account: IAccount) {// 1.账号登录, 获取token等信息const loginResult = await accountLoginRequest(account)this.id = loginResult.data.idthis.name = loginResult.data.namethis.token = loginResult.data.token// 2.进行本地缓存localStorage.setItem('token', this.token)}}
})
export default useLoginStore

以上就可以解决问题。但如果所有的数据都按以上的格式书写代码,比较麻烦。而且,当某些数据是复杂对象时候,用localStorage.setItem进行存储时候,需要用JSON.stringify将复杂对象转为字符串(localStorage、sessionStorage只能存储字符串类型的数据)。同时在state里面又需要将其用JSON.parse转回对象。
所以最好是将localStorage进行封装。

4.封装缓存工具

新建工具文件夹utils,新建一个cache.ts文件:
在这里插入图片描述
utils/cache.ts:

//枚举两种类型,表示localStorage和sessionStorage
enum CacheType {Local,Session
}class Cache {//localStorage和sessionStorage都是Storage类型;storage: Storageconstructor(type: CacheType) {this.storage = type === CacheType.Local ? localStorage : sessionStorage}setCache(key: string, value: any) {if (value) {this.storage.setItem(key, JSON.stringify(value))}}getCache(key: string) {const value = this.storage.getItem(key)if (value) {return JSON.parse(value)}}removeCache(key: string) {this.storage.removeItem(key)}clear() {this.storage.clear()}
}
const localCache = new Cache(CacheType.Local)
const sessionCache = new Cache(CacheType.Session)
export { localCache, sessionCache }

在store/login/login.ts中使用缓存工具:

import { defineStore } from 'pinia'
import { accountLoginRequest } from '@/service/login/login'
import type { IAccount } from '@/types'
import { localCache } from '@/utils/cache'
//这里把字符串'token'换成常量更规范,减少了拼错字符串的可能性,所有“login/token”的地方都可以用LOGIN_TOKEN ;
const LOGIN_TOKEN = 'login/token'
const useLoginStore = defineStore('login', {state: () => ({id: '',token: localCache.getCache(LOGIN_TOKEN) ?? '',name: ''}),actions: {async loginAccountAction(account: IAccount) {// 1.账号登录, 获取token等信息const loginResult = await accountLoginRequest(account)console.log(loginResult)this.id = loginResult.data.idthis.name = loginResult.data.namethis.token = loginResult.data.token// 2.进行本地缓存localCache.setCache(LOGIN_TOKEN, this.token)}}
})export default useLoginStore

当然除了自己封装缓存工具,还可以用pinia持久化插件------pinia-plugin-persistedstate解决问题。可上网自行搜索一下。(https://blog.csdn.net/qq_44741577/article/details/135959968)。

相关文章:

11vue3实战-----封装缓存工具

11vue3实战-----封装缓存工具 1.背景2.pinia的持久化思路3.以localStorage为例解决问题4.封装缓存工具 1.背景 在上一章节,实现登录功能时候,当账号密码正确,身份验证成功之后,把用户信息保存起来,是用的pinia。然而p…...

第16章 Single Thread Execution设计模式(Java高并发编程详解:多线程与系统设计)

简单来说, Single Thread Execution就是采用排他式的操作保证在同一时刻只能有一个线程访问共享资源。 1.机场过安检 1.1非线程安全 先模拟一个非线程安全的安检口类,旅客(线程)分别手持登机牌和身份证接受工作人员的检查,示例代码如所示。…...

MySQL 8.0.41 终端修改root密码

1.在 MySQL 命令行中,运行以下命令修改密码 ALTER USER rootlocalhost IDENTIFIED BY new_password; 其中,new_password替换为你想要设置的新密码 2.退出 MySQL终端,重新打开,使用新密码进入,修改成功...

微信小程序案例2——天气微信小程序(学会绑定数据)

文章目录 一、项目步骤1 创建一个weather项目2 进入index.wxml、index.js、index.wxss文件,清空所有内容,进入App.json,修改导航栏标题为“中国天气网”。3进入index.wxml,进行当天天气情况的界面布局,包括温度、最低温、最高温、天气情况、城市、星期、风行情况,代码如下…...

android的Compose 简介

Jetpack Compose 简介 Jetpack Compose 是 Android 官方推出的声明式 UI 工具包,用于替代传统 XML 布局,简化界面开发流程。它基于 Kotlin 语言,通过函数式编程实现高效、灵活的 UI 构建,支持实时预览和更直观的状态管理。 优势…...

缓存实战:Redis 与本地缓存

引言 在现代互联网应用中,缓存是提升系统性能和用户体验的关键技术之一。通过将频繁访问的数据存储在快速访问的存储介质中,可以显著减少对数据库的直接访问压力,从而提高系统的响应速度和吞吐量。 本文将从实战的角度出发,详细…...

apisix的real-ip插件使用说明

k8s集群入口一般都需要过负载均衡,然后再到apisix。 这时候如果后台业务需要获取客户端ip,可能拿到的是lb或者网关的内网ip。 这里一般要获取真实ip需要做几个处理。 1. 负载均衡上,一般支持配置获取真实ip参数,需要配置上。然…...

音视频协议

1. 多媒体信息 1.1 多媒体信息的两个主要特点: 信息量很大 标准语音:64Kbits(8KHz采样,8位编码)高质量音频:3Mbps(100KHz采样,12位编码) 在传输多媒体数据时,对时延和时延抖动均有较高要求 1.2 处理时延…...

第一财经对话东土科技 | 探索工业科技新边界

当前以ChatGPT、Sora等为代表的生成式人工智能快速发展,越来越多面向垂直场景的行业大模型涌现出来,并成为推动制造业智能化改造与数字化转型、加快推进新型工业化,进而培育发展新质生产力的新引擎。 在垂类场景的应用落地,是AI发…...

Maven 与企业项目的集成

1. Maven 在企业级项目中的作用 Maven 是 Java 生态中最流行的构建和依赖管理工具,广泛用于企业级项目的构建、依赖管理、测试、打包、部署和 CI/CD 集成。对于大型企业项目,Maven 提供了一整套标准化的构建流程,并支持 多模块(M…...

激活函数篇 01 —— 激活函数在神经网络的作用

欢迎来到我的主页:【Echo-Nie】 本篇文章收录于专栏【机器学习】 以下是激活函数系列的相关的所有内容: 激活函数篇 01 —— 一文搞懂激活函数在神经网络中的作用 逻辑回归:Sigmoid函数在分类问题中的应用 1 激活函数的作用 1.1 引入非线性 激活函数…...

22.2、Apache安全分析与增强

目录 Apache Web安全分析与增强 - Apache Web概述Apache Web安全分析与增强 - Apache Web安全威胁Apache Web安全机制Apache Web安全增强 Apache Web安全分析与增强 - Apache Web概述 阿帕奇是一个用于搭建WEB服务器的应用程序,它是开源的,它的配置文件…...

Day.23

leetcode 413.等差数列划分 问题:如果一个数列 至少有三个元素 ,并且任意两个相邻元素之差相同,则称该数列为等差数列。给你一个整数数组 nums ,返回数组 nums 中所有为等差数组的 子数组 个数。 子数组 是数组中的一个连续序列…...

CentOS虚机在线扩容系统盘数据盘

最近在制作Openstack下的镜像,用户需要CentOS6以及CentOS7的虚机镜像,遇到了些关于系统盘以及数据盘在线扩容的问题,故此整理一下。 ​ 传统我们想对磁盘在线热扩容,必然会想到LVM逻辑卷。如果没有LVM逻辑卷的情况下,…...

动手写ORM框架 - GeeORM第一天 database/sql 基础

文章目录 1 初识 SQLite2 database/sql 标准库3 实现一个简单的 log 库4 核心结构 Session本文是7天用Go从零实现ORM框架GeeORM的第一篇。介绍了 SQLite 的基础操作(连接数据库,创建表、增删记录等)。使用 Go 语言标准库 database/sql 连接并操作 SQLite 数据库,并简单封装…...

绘制中国平安股价的交互式 K 线图

在本文中,探索如何使用 Python 的强大库进行股市数据分析与可视化。我们将以中国平安(股票代码:sh601318)为例,展示如何获取其股票数据,并绘制一张交互式 K 线图。 K 线图是股市分析中不可或缺的工具,它能够直观地显示股票的波动情况,包括开盘价、收盘价、最高价和最低…...

[渗透测试]热门搜索引擎推荐— — shodan篇

[渗透测试]热门搜索引擎推荐— — shodan篇 免责声明:本文仅用于分享渗透测试工具,大家使用时,一定需要遵守相关法律法规。 除了shodan,还有很多其他热门的,比如:fofa、奇安信的鹰图、钟馗之眼等&#xff0…...

JavaScript 在 VSCode 中的优势与应用

JavaScript 在 VSCode 中的优势与应用 引言 随着前端技术的发展,JavaScript 已经成为了网页开发中最流行的编程语言之一。Visual Studio Code(简称 VSCode)作为一款轻量级、可扩展的代码编辑器,因其强大的功能和良好的用户体验,深受广大开发者的喜爱。本文将探讨 JavaSc…...

深度学习之StyleGAN算法解析

StyleGAN 算法解析及详细介绍 1. StyleGAN 算法由来 StyleGAN(Style-Based Generative Adversarial Network)是 NVIDIA 于 2018 年 提出的 高质量图像生成算法,由 Tero Karras 等人在论文 《A Style-Based Generator Architecture for Generative Adversarial Networks》 …...

数据结构之排序

排序 参考链接: https://zq99299.github.io/dsalg-tutorial/dsalg-java-hsp/07/09.html#%E7%AE%80%E5%8D%95%E4%BB%8B%E7%BB%8D 基数排序 计数排序 https://www.hello-algo.com/chapter_sorting/counting_sort/...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

【51单片机】4. 模块化编程与LCD1602Debug

1. 什么是模块化编程 传统编程会将所有函数放在main.c中&#xff0c;如果使用的模块多&#xff0c;一个文件内会有很多代码&#xff0c;不利于组织和管理 模块化编程则是将各个模块的代码放在不同的.c文件里&#xff0c;在.h文件里提供外部可调用函数声明&#xff0c;其他.c文…...

麒麟系统使用-进行.NET开发

文章目录 前言一、搭建dotnet环境1.获取相关资源2.配置dotnet 二、使用dotnet三、其他说明总结 前言 麒麟系统的内核是基于linux的&#xff0c;如果需要进行.NET开发&#xff0c;则需要安装特定的应用。由于NET Framework 是仅适用于 Windows 版本的 .NET&#xff0c;所以要进…...

STL 2迭代器

文章目录 1.迭代器2.输入迭代器3.输出迭代器1.插入迭代器 4.前向迭代器5.双向迭代器6.随机访问迭代器7.不同容器返回的迭代器类型1.输入 / 输出迭代器2.前向迭代器3.双向迭代器4.随机访问迭代器5.特殊迭代器适配器6.为什么 unordered_set 只提供前向迭代器&#xff1f; 1.迭代器…...