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

Vue3状态管理库Pinia——自定义持久化插件

个人简介

👀个人主页: 前端杂货铺
🙋‍♂️学习方向: 主攻前端方向,正逐渐往全干发展
📃个人状态: 研发工程师,现效力于中国工业软件事业
🚀人生格言: 积跬步至千里,积小流成江海
🥇推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒Three.js 🍖JS版算法
🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧

Pinia

内容参考链接
Vue3正式发布那么久了,你认识Pinia了吗?认识Pinia,搭建开发环境
Pinia 核心概念核心概念(Store、State、Getter、Action)
购物车 DemoPinia 实现简易版购物车

文章目录

  • Pinia
    • ✨✨前言
    • ✨✨Pinia 持久化插件
    • 🎉🎉本篇小结


✨✨前言

就我们上篇文章中的 简易版购物车实战 而言,它的状态是 不持久的,因为当我们对商品加/减,对单选/全选框进行操作后,再 刷新页面,就 又回到了最原始的状态,那么如何能记录我们之前的操作呢,Pinia持久化插件就可以解决该问题!


✨✨Pinia 持久化插件

Pinia 持久化插件是一个函数,可以选择返回要添加到 store 的属性。

其基本思路为:监听 state 的变化,把每次变化的结果放到 localStorage 中。

我们在 store 文件下创建 plugins文件,再创建 persistedState.ts 文件

在这里插入图片描述

persistedState.ts

我们导入 pinia,把 PiniaPluginContext 赋值给 context,为 PiniaPlugin 的 上下文

通过 context.store.$id(即模块名) 我们可以获取到 localStorage 的详细内容。

通过 context.store.$patch 我们可以把数据存放到 pinia 对应的模块里。

通过 context.store.$subscribe 我们可以在每次 state 发生变化时,把它保存到 localStorage 中。

当我们点击 Age+1 按钮时,看一下 _storestate 的庐山真面目:

在这里插入图片描述

import { PiniaPluginContext } from "pinia";export function persistedState(context: PiniaPluginContext) {// 根据模块名,拿到对应localStorageconst currentState = JSON.parse(localStorage.getItem(context.store.$id) || "{}")// 把数据存放到pinia对应的模块里context.store.$patch(currentState)/*** 每次state发生变化时,都把它保存在localStorage里* 参数一:当前修改store的上下文,可以通过它获取_store.storeId充当键* 参数二:当前修改的状态,可以充当值*/context.store.$subscribe((_store, state) => {console.log(_store)console.log(state)// 存入键值(依据上图数据结构)(需要序列化)localStorage.setItem(_store.storeId, JSON.stringify(state))}, {// 组件卸载,依赖仍然存在detached: true})
}

shop.vue

在上一篇 Pinia实现简易版购物车 的基础上,我们对 shop.vue 进行补充,把 user.ts 也引入了进来,并进行简单的使用(年龄+1)

<div><button @click="userStore.age += 1">Age+1</button>{{ userStore.age }}
</div>
...
import { useUserStore } from './store/user';
const userStore = useUserStore();

index.ts

index.ts 中导入 persistedState,然后通过 pinia 使用它

import { createPinia } from 'pinia'
import { persistedState } from './plugins/persistedState'const pinia = createPinia()// 使用插件
pinia.use(persistedState)export default pinia

这样我们的自定义持久化插件就完成啦~

Pinia自定义持久化插件


🎉🎉本篇小结

本篇借助 Pinia 的一些属性,把数据存储到 localStorage,从而实现了数据的持久化。

其实也有一些现成的持久化插件,比如终端键入:npm i pinia-plugin-persist-S 并进行相应配置等,也可以实现数据的持久化(感兴趣的小伙伴可以自行搜索 Pinia持久化插件 的具体内容,学习安装及相关配置)!

好啦,本篇文章到这里就要和大家说再见啦,祝你这篇文章阅读愉快,你下篇文章的阅读愉快留着我下篇文章再祝!


参考资料:

  1. Pinia 官方文档
  2. Pinia 教程 【作者:千锋教育】

在这里插入图片描述


相关文章:

Vue3状态管理库Pinia——自定义持久化插件

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…...

il汇编整数相加

在这里尝试了IL汇编字符串连接&#xff1b; IL汇编字符串连接_bcbobo21cn的博客-CSDN博客 下面来看一下IL汇编整数相加&#xff1b; 大概的看一下一些资料&#xff0c;下面语句&#xff0c; ldc.i4 20 ldc.i4 30 add 看上去像是&#xff0c;装载整数20到一个类似于…...

RabbitMQ 事务

事务简介 就像我们了解的MySQL中的事务一样&#xff0c;RabbiMQ的事务也具备原子性和一致性&#xff0c;并且RabbiMQ的事务是针对消息从生产者发送到RabbitMQ中提供的支持&#xff0c;因此不同事务可以同时给同一个队列发送信息。   可通过channel.txSelect&#xff0c;chann…...

vue前端 让年月日 加上23:59:59

yyyy/MM/dd HH:mm:ss 格式 // 获取 lateCreateTime 的原始时间戳 const timestamp new Date(this.queryAO.lateCreateTime).getTime();// 将时间戳转换为指定格式的字符串 const formattedDateTime new Date(timestamp).toLocaleString("zh-CN", {year: "num…...

【雕爷学编程】Arduino动手做(186)---WeMos ESP32开发板8

37款传感器与模块的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&#x…...

STM32--综述

文章目录 前言STM32简介STM32F103C8T6系统结构Keil软件安装注意事项新建工程操作流程 前言 本专栏将学习B站江协科技的STM32入门教程&#xff0c;通过自身理解和对老师的总结所写的博客专栏。 STM32简介 STM32是意法半导体&#xff08;STMicroelectronics&#xff09;公司推…...

Linux学习之sed、awk和vim的差异

sed、awk和vim都是编辑器&#xff0c;区别如下&#xff1a; vim是交互式&#xff0c;需要跟用户进行互动&#xff0c;而sed和awk是非交互式&#xff0c;只需要写好命令&#xff0c;不用跟用户进行互动就可以完成任务。 vim是文本编辑器&#xff0c;操作的时候会对整个文件编辑&…...

MacOS上配置docker国内镜像仓库地址

背景 docker官方镜像仓库网速较差&#xff0c;我们需要设置国内镜像服务 我的MacOS docker版本如下 设置docker国内镜像仓库地址 点击Settings点击Docker Engine修改配置文件&#xff0c;添加registry-mirrors {"builder": {"gc": {"defaultKeepS…...

全志F1C200S嵌入式驱动开发(soc系统集成)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】 任何一个嵌入式设备都是由很多的子系统组成的。这里面有硬件、有软件,还可能有机械,并不一定就是大家看到的消费电子那样,即一个soc构成了所有的系统。现实情况是,要构建一个系…...

React路由5版本

什么是路由? 一个路由就是一个映射关系(key:value). 以下代码用的都是router5 通过 npm install react-router-dom5 下载 所有路由用到的东西都需要从react-router-dom中引入 import {BrowserRouter,Link,Route,NavLink,Redirect,withRouter} from react-router-dom 1. 路…...

6.4.3 1x1卷积层

特点&#xff1a;1x1卷积层相当于全连接层 作用&#xff1a;1x1卷积用于调整网络层的通道数量和控制模型复杂度 输入形状&#xff1a;(通道&#xff0c;行&#xff0c;列) (3,3,3) 卷积核形状&#xff1a;(输出通道&#xff0c;输入通道&#xff0c;行&#xff0c;列) (2,3,…...

[CKA]考试之检查可用节点数量

由于最新的CKA考试改版&#xff0c;不允许存储书签&#xff0c;本博客致力怎么一步步从官网把答案找到&#xff0c;如何修改把题做对&#xff0c;下面开始我们的 CKA之旅 题目为&#xff1a; Task 检查集群中有多少节点为Ready状态&#xff08;不包括被打上 Taint&#xff1…...

备考错题知识点总结

错题知识点总结 强化一&#xff0c;错题&#xff0c;范围管理&#xff0c;128题目 1 强化练习题 1 不理解的题目 4 什么玩意&#xff1f; 读不懂 你正在与产品负责人一起确定可行的产品迭代计划。 当你讨论各种特性并确定它们的优先级时&#xff0c;你们都在努力理解哪些特…...

初识Flask:Python轻量级Web框架入门教程

Flask是一个用Python编写的轻量级Web应用框架。由于其“微”性质&#xff0c;Flask在提供核心服务的同时&#xff0c;仍然提供了许多扩展的可能性。在这篇文章中&#xff0c;我们将从最基础开始&#xff0c;学习如何使用Flask构建一个Web应用。 一、安装与初次启动 首先&…...

【BASH】回顾与知识点梳理(七)

【BASH】回顾与知识点梳理 七 七. 前六章知识点总结及练习7.1 总结7.2 练习 该系列目录 --> 【BASH】回顾与知识点梳理&#xff08;目录&#xff09; 七. 前六章知识点总结及练习 7.1 总结 由于核心在内存中是受保护的区块&#xff0c;因此我们必须要透过『 Shell 』将我…...

Python实现对IP网段的快速检测

前言 本文是该专栏的第33篇,后面会持续分享python的各种干货知识,值得关注。 在工作上可能会遇到这样的需求,需要你对某个IP地址的网段进行批量检测。将可用和不可用IP批量筛选出来,尤其是在爬虫项目中,对于IP可用性的检测需求较多。 那么在python中,有没有方法可以快速…...

伪操作、C和汇编、ATPCS协议

一、伪操作.global 全局.local 局部.equ 声明.macro 子函数.if .endif 条件编译.rept 重复操作.weak 弱化.word 申请一个字空间.byte 申请一个字节空间.align 地址对齐.arm ARM指令.thumb Thumb指令.text 代码段.data 数据段.space 申请N个字节空间 二、C和汇编的混合编程三、A…...

OPENCV C++(五)滤波函数+sobel边缘检测+人脸磨皮mask

滤波函数 中值滤波 medianBlur(frame, detectmat, 5); 平均滤波 blur(frame, detectmat, Size(5, 5)); 高斯滤波&#xff08;最后一个是方差 越大越模糊&#xff09; GaussianBlur(frame, detectmat, Size(5, 5),0); sobel的边缘检测函数 Sobel(gray, dx, CV_16S, 1, 0, 3…...

20天突破英语四级高频词汇——第②天

2&#xfeff;0天突破英语四级高频词汇~第2天加油(ง •_•)ง&#x1f4aa; &#x1f433;博主&#xff1a;命运之光 &#x1f308;专栏&#xff1a;英语四级高频词汇速记 &#x1f30c;博主的其他文章&#xff1a;点击进入博主的主页 目录 2&#xfeff;0天突破英语四级高…...

【Python 学习】第一个python案例

Python的ATM机Demo 一、需要安装python环境(略) 二、ATM源码 # 初始化全局余额 money 5000# 定义初始化界面菜单函数def menu(name):"""主页面-主菜单 返回用户选择的菜单:param name: 用户名称:return: 返回菜单类型"""print(f"{name}…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...