小工具      在线工具  汉语词典  css  js  c++  java

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

Vue3+Pinia+TS+Vite从入门到实战,状态模式,Vue3,Pinia 额外说明

收录于:112天前

个人简介

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

Pinia

内容 参考链接
Vue3正式发布那么久了,你认识Pinia了吗? 认识Pinia,搭建开发环境
Pinia 核心概念 核心概念(Store、State、Getter、Action)
购物车 Demo 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) {
    
    // 根据模块名,拿到对应localStorage
    const 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 教程 【作者:千锋教育】

在这里插入图片描述


. . .

相关推荐

额外说明

html - 在表单上做笔记

<form id="forms"> <input type="text" name="input1" value="11111" /><br /> <input type="text" name="input2" value="22222"

额外说明

Docker安装MeiliSearch教程

MeiliSearch是一款开源的全文搜索引擎,它使用Rust编写,具有高效、快速、易用的特点。MeiliSearch支持多种语言,可以轻松地集成到任何应用程序中。它可以处理大量的文本数据,并能够快速地搜索和返回相关的结果。MeiliSearch还提供了

额外说明

如何用若易包装分离jar包和资源文件?

有时候需要分离lib和resouce,可以修改ruoyi-admin 下的pom.xml文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/P

额外说明

JavaScript——为什么静态方法不能调用非静态方法

个人简介 -个人主页: 前端杂货铺 -‍♂️学习方向: 主攻前端方向,正逐渐往全干发展 -个人状态: 研发工程师,现效力于中国工业软件事业 -人生格言: 积跬步至千里,积小流成江海 -推荐学习:-前端面试宝典 -Vue2 -Vue3 -Vue2/3项目实

额外说明

【Unity日常开发】创建脚本自动添加头注

推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 QQ群:1040082875 一、前言 有些代码,会在代码的头部写上一大堆的注释: (1)说明这是谁写的 (2)什么时候创建的 (3)什么版本 (4)什么作用

额外说明

【C++ STL基础入门】初识STL

文章目录 前言 一、STL是什么? 1.STL概念 2.容器是什么? 3.STL的优势 二、将会学习到的stl和算法 1.将会学到的容器 2.算法 3.字符串 基础字符串 字符串视图(basic_string_view) 总结 前言 本系列STL是以VS

额外说明

华为云云耀云服务器L实例评测|Python Selenium加Chrome Driver构建UI自动化测试实践

-作者简介,黑夜开发者,CSDN领军人物,全栈领域优质创作者✌,CSDN博客专家,阿里云社区专家博主,2023年6月CSDN上海赛道top4。 -数年电商行业从业经验,AWS/阿里云资深使用用户,历任核心研发工程师,项目技术负责人。 -欢迎 -点赞✍评论

额外说明

07. Vuepress1.x Markdown 中使用 Vue 组件

重点说明 参考:中文指南、英文指南 示例 结构 Markdown中使用 # 标题 1 ## 标题 2 ### 标题 3 <test-template></test-template>  效果

额外说明

JAVA分布式篇2——Zookeeper

JAVA分布式篇2——Zookeeper 1、简介 Zookeeper是一个开源的分布式(多台服务器干一件事)的,为分布式应用提供协调服务的 Apache项目 2、工作机制 Zookeeper从设计模式角度来理解:是一个基于观察者模式(一个人干活,有人盯

额外说明

Windows系统丢失RpcRtRemote.dll文件导致程序异常问题

其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题,如果是新手第一时间会认为是软件或游戏出错了,其实并不是这样,其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库,这时你可以下载这个RpcRtRemote.dl

ads via 小工具