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: {// 调整为兼容多端的APIstorage: {setItem(key, value) {uni.setStorageSync(key, value) // [!code warning]},getItem(key) {return uni.getStorageSync(key) // [!code warning]},},},
},
)

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

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【深度学习】S2 数学基础 P1 线性代数(上)

目录 基本数学对象标量与变量向量矩阵张量降维求和非降维求和累计求和 点积与向量积点积矩阵-向量积矩阵-矩阵乘法 深度学习的三大数学基础 —— 线性代数、微积分、概率论; 自本篇博文以下几遍博文,将对这三大数学基础进行重点提炼。 本节博文将介绍线…

Illegal escape character in string literal

问题 笔者进行Android项目开发,编译器提示报错 Illegal escape character in string literal详细问题 textView.setText(“A\B”); 解决方案 修改代码为A\B textView.setText(“A\B”) 产生原因 问题产生的原因是在字符串字面值中使用了非法的转义字符。在…

猫头虎分享已解决Bug ‍ || 错误SyntaxError: invalid syntax(Python)的解决方法

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

编写代码(LLVM的第一个项目)

下面这个完整代码 它相对较短,因为它建立在LLVM 流程的基础设施上 后者替我们完成大部分工作 我们从程序使用cl命名空间中的llvm工具(cl代表命令行)来实现我们的命令行接口 需要调用ParseCommandLineOption函数声明cl:&#xff…

滑动小短剧影视微信小程序源码/带支付收益等模式

仿抖音滑动小短剧影视微信小程序源码,带支付收益等模式、支持无限滑动;高性能滑动、预加载、视频预览,支持剧情介绍,集合壁纸另外仿抖音滑动效果;支持会员模式,支持用户单独购买等等多功能。 丰富的后台设…

Vscode 在汇编文件中添加调试断点

Vscode 在汇编文件中添加调试断点 vscode默认不支持汇编文件添加断点, 可以在设置里面打开

开发自定义标记应用程序

开发自定义标记应用程序 问题陈述 Larry Williams 是ABC Inc.公司的CEO,他希望公司能够拥有一个交互式网站以向访问网站的用户表示问候并显示当前时间。他还希望最终用户能够指定主页的背景颜色。您是公司的网站管理员。Larry要您修改网站的主页,以便向最终用户显示自定义问…

19 删除链表的倒数第 N 个结点

19. 删除链表的倒数第 N 个结点 中等 相关标签 相关企业 提示 给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点。 这段代码使用了双指针的方法,其中一个指针先走 n 步,然后两个指针一起走,直到第一…

Java强训day20(选择题编程题)

选择题 编程题 题目1 import java.util.Scanner;public class Main { public static void main(String[] args) {Scanner sc new Scanner(System.in);String s sc.nextLine();StringBuffer ss new StringBuffer(s);System.out.println(ss.reverse());sc.close();} }

数学建模:K-means聚类手肘法确定k值(含python实现)

原理 当K-means聚类的k值不被指定时,可以通过手肘法来估计聚类数量。   在聚类的过程中,随着聚类数的增大,样本划分会变得更加精细,每个类别的聚合程度更高,那么误差平方和(SSE)会逐渐变小&am…

有趣儿的组件(HTML/CSS)

分享几个炫酷的组件&#xff0c;起飞~~ 评论区留爪&#xff0c;继续分享哦~ 文章目录 1. 按钮2. 输入3. 工具提示4. 单选按钮5. 加载中 1. 按钮 HTML&#xff1a; <button id"btn">Button</button>CSS&#xff1a; button {padding: 10px 20px;text-tr…

Python中多种生成随机密码超实用实例

前言 密码是信息安全的基石&#xff0c;它用于保护我们的账户、数据和隐私。为了确保密码足够强大&#xff0c;需要生成随机密码。在本文中&#xff0c;将讨论多种Python方法&#xff0c;用于生成随机密码的实用示例和技巧。 目录 ​编辑 前言 密码生成的要求 使用secrets…