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

本文介绍了如何在Vue3项目中使用Pinia插件实现数据的持久化,通过监听state变化并将数据存储到localStorage,实现在页面刷新后保持购物车等状态。同时提到了使用现成插件如ipinia-plugin-persist的可能性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

个人简介

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

Pinia

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


✨✨前言

就我们上篇文章中的 简易版购物车实战 而言,它的状态是 不持久的,因为当我们对商品加/减,对单选/全选框进行操作后,再 刷新页面,就 又回到了最原始的状态,那么如何能记录我们之前的操作呢,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 教程 【作者:千锋教育】

在这里插入图片描述


评论 26
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端杂货铺

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值