uniapp微信小程序开发踩坑日记:Pinia持久化

如果你使用过Pinia,那你应该知道Pinia持久化插件:https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

但由于官方文档提供的说明并不是针对小程序开发,所以我们在使用这个插件实现uniapp小程序开发中Pinia持久化会出现问题

我在CSDN上看了各种文章,在B站上刷了各种视频,AI也被我问烂了,最后将各种资源糅合在一起,拼凑出了一套完整的解决方案,搜索资源的能力真的很重要!

以上是闲聊(手动狗头),以下是uniapp微信小程序开发实现Pinia持久化的完整方法(阅读此文章请结合Pinia持久化插件官方文档:https://prazdevs.github.io/pinia-plugin-persistedstate/zh/)

1、安装依赖

这一步安装官方文档来就好(官方文档:https://prazdevs.github.io/pinia-plugin-persistedstate/zh/)

2、将插件添加到 pinia 实例上

在main.js中加入如下代码

//将pinia持久化插件添加到pinia实例上
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' //导入pinia持久化插件
const pinia = createPinia()
app.use(pinia.use(piniaPluginPersistedstate)); //pinia插件的安装配置(千万别忘了这步!!!)

3、用法

这一步与官方文档有所不同,插件默认使用 localStorage 实现持久化,小程序端不兼容,需要替换持久化 API

组合式API下,配置持久化的具体代码如下(主要式persist的部分和官方文档不同),选项式API也类似:

import { defineStore } from 'pinia'

export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('你好 pinia')
    return { someState }
  },
  {
  // 配置持久化
  persist: {
    // 调整为兼容多端的API
    storage: {
      setItem(key, value) {
        uni.setStorageSync(key, value) // [!code warning]
      },
      getItem(key) {
        return uni.getStorageSync(key) // [!code warning]
      },
    },
  },
},
)

完成以上三个步骤后,所有Pinia仓库中的数据都会被保存在本地

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/383161.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java学习07---综合练习

飞机票 1.需求: 机票价格按照淡季旺季、头等舱和经济舱收费、输入机票原价、月份和头等舱或经济舱。 按照如下规则计算机票价格:旺季(5-10月)头等舱9折,经济舱8.5折,淡季(11月到来年4月)头等舱7…

人力资源智能化管理项目(day05:角色管理)

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/humanResourceIntelligentManagementProject 搭建页面结构 分页组件:设置layout,表示需要显示的内容,用逗号分隔,布局元素会依次显示。prev表示上一页,next为…

Ps:统计

Ps菜单:文件/脚本/统计 Scripts/Statistics 统计 Statistics脚本命令提供了一种高效的方法来处理和分析大量图像,使用户能够自动执行复杂的图像分析任务,并在多个图像间应用统计学方法。这个功能极大地扩展了 Photoshop 在科学研究、图像编辑…

ThreeDPose

还没跑: GitHub - moshoeu/ThreeDPoseModelDriver: 用3DPose骨骼位置驱动人形模型动画 GitHub - Doggerlas/3DPoseTracker: unity练手项目 https://github.com/digital-standard/ThreeDPoseTracker GitHub - xerifg/Real-time-3DposeTracking-Unity3D-UnityChan: capture hum…

Acwing 5469. 有效点对【正难则反+巧妙选择根节点】

原题链接:https://www.acwing.com/problem/content/5472/ 题目描述: 给定一个 n 个节点的无向树,节点编号 1∼n。 树上有两个不同的特殊点 x,y,对于树中的每一个点对 (u,v)(u≠v),如果从 u 到 v 的最短路径需要经过…

C语言分钟计算

一.题目描述 给你同一天的两个时间(24小时制),求这两个时间内有多少分钟,保证第一个时间在第二个时间之前. 二.输入描述 输入两行,每行包括两个整数表示小时和分钟. 三.输出描述 输出分钟数. 四.示例 输入 10 10 11 05 输出 55 五.代码

【Linux中增加Nginx虚拟主机配置文件(conf.d)】后访问80端报403

在nginx.conf的http模块新增 include /etc/nginx/conf.d/*.conf; 后 重启nginx报403 处理办法: 1,如果nginx是root用户启动的 则需要 将nginx.config的user改为和启动用户一致 2.权限问题,如果nginx没有web目录的操作权限,也会出…

《21天精通IPv4 to IPv6》第3天:IPv6地址配置——如何为不同的系统配置IPv6?

博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接: 🔗 精选专栏: 《面试题大全》 — 面试准备的宝典!《IDEA开发秘籍》 — 提升你的IDEA技能!《100天精通鸿蒙》 …

【报错解决】-bash: export: `-8‘: not a valid identifier 不是有效的标识符

现象 一登陆就提示-bash: export: -8’: not a valid identifier 不是有效的标识符 问题出现的原因 设置字符集时多写了空格 [rootdb1 ~]# cat >>/etc/profile<<EOF export LANGen_US.UTF -8(-8前不应有空格) EOF 解决方法 cd /etc vi profile 把export带有-8的…

c++求三个数中最大数

#include<iostream> using namespace std; int main() { int a,b,c; cout<<"请输入三个数字"<<endl;//end后面为小写的L cin>>a>>b>>c; if(a>b&&a>c) cout<<"最大数为a:"<<a<<e…

基于centos的Linux中如何安装python

前言 之前在linux上安装python的时候没来及记录下来&#xff0c;感觉还是有必要的&#xff0c;所以现在打算把原来装好的python卸载掉&#xff0c;然后重装一遍&#xff0c;重新记录一下。当前环境是否安装python 通过查询我发现机器里有3个版本的python&#xff0c;第一个是…

常用的git命令

1、git clone 克隆远程项目。从远程上下载的是master分支&#xff0c;通常开发都会重新拉一个分支&#xff0c;比如dev&#xff0c;在dev分支上进行开发&#xff0c;然后再合并到master上。 git clone http://xxxxxxxxxxxxxx.git2、git checkout 检出特定分支。项目clone完以后…

Java奠基】对象数组练习

目录 商品对象信息获取 商品对象信息输入 商品对象信息计算 商品对象信息统计 学生数据管理实现 商品对象信息获取 题目要求是这样的&#xff1a; 定义数组存储3个商品对象。 商品的属性&#xff1a;商品的id&#xff0c;名字&#xff0c;价格&#xff0c;库存。 创建三个…

EasyExcel动态列导出

测试代码地址&#xff1a;https://gitee.com/wangtianwen1996/cento-practice/tree/master/src/test/java/com/xiaobai/easyexcel/dynamiccolumn 官方文档&#xff1a;https://easyexcel.opensource.alibaba.com/docs/2.x/quickstart/write 一、实现方式 1、根据需要导出的列…

【安卓跨程序共享数据,探究ContentProvider】

ContentProvider主要用于在不同的应用程序之间实现数据共享的功能&#xff0c;它提供了一套完整的机制&#xff0c;允许一个程序访问另一个程序中的数据&#xff0c;同时还能保证被访问数据的安全性。 目前&#xff0c;使用ContentProvider是Android实现跨程序共享数据的标准方…

一个小而实用的 Python 包 pangu,实现在中文和半宽字符(字母、数字和符号)之间自动插入空格

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 一个小巧的库&#xff0c;可以避免自己重新开发功能。利用 Python 包 pangu&#xff0c;可以轻松实现在 CJK&#xff08;中文、日文、韩文&#xff09;和半宽字符&#xff08;字母、数字和符号&#xf…

代码随想录|day 13

Day 13 又出去玩了 附上一个学习链接&#xff1a;https://www.geeksforgeeks.org 具体页面&#xff1a;Introduction to Binary Tree - Data Structure and Algorithm Tutorials - GeeksforGeeks 一、理论学习 今天是回顾了二叉树中最重要的操作 : 遍历二叉树。 我们可以将…

解决挂梯子 无法正常上网 的问题

方法&#xff1a; 打开 控制面板 &#x1f449; 网络和Internet &#x1f449; Internet选项 &#x1f449; 连接 &#x1f449; 局域网设置 &#x1f449; 代理服务器 &#x1f449; 取消选项 有问题可参考下图

flask+python企业产品订单管理系统938re

在设计中采用“自下而上”的思想&#xff0c;在创新型产品提前购模块实现了个人中心、个体管理、发布企业管理、投资企业管理、项目分类管理、产品项目管理、个体投资管理、企业投资管理、个体订单管理、企业订单管理、系统管理等的功能性进行操作。最终&#xff0c;对基本系统…

面试经典150题——三数之和

​"The road to success and the road to failure are almost exactly the same." - Colin R. Davis 1. 题目描述 2. 题目分析与解析 2.1 思路一——暴力方法 因为三个数相加为0&#xff0c;那么说明其中两个加数的和与另一个加数为相反数则满足题意。所以可以得到…