当前位置: 首页 > 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 教程 【作者:千锋教育】

在这里插入图片描述


http://www.lryc.cn/news/112194.html

相关文章:

  • il汇编整数相加
  • RabbitMQ 事务
  • vue前端 让年月日 加上23:59:59
  • 【雕爷学编程】Arduino动手做(186)---WeMos ESP32开发板8
  • STM32--综述
  • Linux学习之sed、awk和vim的差异
  • MacOS上配置docker国内镜像仓库地址
  • 全志F1C200S嵌入式驱动开发(soc系统集成)
  • React路由5版本
  • 6.4.3 1x1卷积层
  • [CKA]考试之检查可用节点数量
  • 备考错题知识点总结
  • 初识Flask:Python轻量级Web框架入门教程
  • 【BASH】回顾与知识点梳理(七)
  • Python实现对IP网段的快速检测
  • 伪操作、C和汇编、ATPCS协议
  • OPENCV C++(五)滤波函数+sobel边缘检测+人脸磨皮mask
  • 20天突破英语四级高频词汇——第②天
  • 【Python 学习】第一个python案例
  • 【C#学习笔记】值类型(2)
  • 【设计模式】-建造者模式
  • 【N32L40X】学习笔记14-在RT-thread系统中读取eeprom数据
  • Python OpenCV读取并显示USB UVC摄像头
  • 针对高可靠性和高性能优化的1200V碳化硅沟道MOSFET
  • 在服务器上搭建gitlab
  • Amazon Aurora Serverless v2 正式发布:针对要求苛刻的工作负载的即时扩展
  • nginx的优化和防盗链 重要!!!
  • 十五.redis缓存穿透,击穿,雪崩
  • Spring源码——初识Spring容器
  • arcgis--数据库构建网络数据集