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

news2024/10/6 10:27:58

如果你使用过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.coloradmin.cn/o/1444937.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ubuntu中尝试安装ros2

首先,ubuntu打开后有个机器人栏目,打开后,有好多可选的,看了半天 ,好像是博客,算了,没啥关系,再看看其他菜单 这些都不是下载链接。先不管,考虑了一下,问了ai&#xff…

Z-Stack一直卡在HAL_BOARD_INIT();

原因是Debugger没有配置好,因为默认是Simulator,不是TI的驱动,所以仿真出现一直卡在 HAL_BOARD_INIT(); 的情况,解决方法就是将Simulator改为Texas Instruments 改成下面的样子

Unity Meta Quest MR 开发(四):使用 Scene API 和 Depth API 实现深度识别和环境遮挡

文章目录 📕教程说明📕Scene API 实现遮挡📕Scene API 实现遮挡的缺点📕Depth API 实现遮挡⭐导入 Depth API⭐修改环境配置⭐添加 EnvironmentDepthOcclusion 预制体⭐给物体替换遮挡 Shader⭐取消现实手部的遮挡效果 此教程相关…

如何入门AI Agent?

随着chatgpt问世,大模型已经在加速各行各业的变革,这是我之前对AI Agent行业的粗浅判断。 下面给大家介绍一下如何制作AI Agent,我会用我开发的全赞AI为例子进行简要的介绍,下面是一种工具型AI Agent的框架图 这是一个大量使用工具…

vue中watch和computed的不同

第076个 查看专栏目录: VUE ------ element UI Vue.js 中的 watch 和 computed 都是用于监听数据变化并执行相应操作的选项,但它们的使用场景和优劣势有所不同。 两者区别 watch 用于监听一个或多个数据属性的变化,并在变化时执行相应的处理函数。 它…

unity学习案例总结

动态标签 GitHub - SarahMit/DynamicLabel3D: Simple dynamic labels for a 3D Unity scene

Jumpserver教程01:部署jumpserver

Jumpserver教程 注: 本教程由羞涩梦整理同步发布,本人技术分享站点:blog.hukanfa.com 转发本文请备注原文链接,本文内容整理日期:2024-02-11 csdn 博客名称:五维空间-影子,欢迎关注 简要说明…

单片机学习笔记---AT24C02(I2C总线)

目录 有关储存器的介绍 存储器的简介 存储器简化模型 AT24C02介绍 AT24C02引脚及应用电路 I2C总线介绍 I2C电路规范 开漏输出模式和弱上拉模式 其中一个设备的内部结构 I2C通信是怎么实现的 I2C时序结构 起始条件和终止条件 发送一个字节 接收一个字节 发送应答…

【深度优先搜索】【树】【图论】2973. 树中每个节点放置的金币数目

作者推荐 视频算法专题 本博文涉及知识点 深度优先搜索 树 图论 分类讨论 LeetCode2973. 树中每个节点放置的金币数目 给你一棵 n 个节点的 无向 树,节点编号为 0 到 n - 1 ,树的根节点在节点 0 处。同时给你一个长度为 n - 1 的二维整数数组 edges…

计网day1

RTT:往返传播时延(越大,游戏延迟) 一.算机网络概念 网络:网样的东西,网状系统 计算机网络:是一个将分散得、具有独立功能的计算机系统,通过通信设备与线路连接起来,由功…

课堂秩序要求有哪些内容

你是否曾经疑惑,为什么有些课堂总是秩序井然,而有些则混乱不堪?作为一位经验丰富的老师,我想告诉你,课堂秩序不仅仅是学生安静听讲那么简单,它背后涉及到许多关键因素,直接影响着教学质量和学习…

Unity学习笔记(零基础到就业)|Chapter04:C#篇补充到Unity篇过渡

Unity学习笔记(零基础到就业)|Chapter02:C#篇补充到Unity篇过渡 前言C#总结补充1.值类型和引用类型有什么区别,他们在值的传递上分别有怎样的特性2.string是引用类型,但是他对外表现出值类型的特性,为什么&…

【BIAI】Lecture 14 - Sleep and Dreaming

Sleep and Dreaming 专业词汇 pons 延髓 parietal cortex 顶叶皮层 limbic system 边缘系统 temporal cortex 颞叶皮层 dorsolateral prefrontal cortex 背外侧前额叶皮层 pineal gland 松果体 Suprachiasmatic Nucleus 视交叉上核 课程大纲 Sleep stages awake无眼动睡眠&am…

Java异常处理 throw和throws

目录 throwthrows实例制造异常 在Java中,throw和throws关键字都与异常处理有关,但它们的使用方式和目的有所不同。 throw throw关键字: * throw用于在代码中显式地抛出一个异常。你可以使用它来触发一个异常,并指定异常的类型。…

Google刚刚推出了图神经网络Tensorflow-GNN

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

Hadoop-Yarn-ResourceManagerHA

在这里先给屏幕面前的你送上祝福,祝你在未来一年:技术步步高升、薪资节节攀升,身体健健康康,家庭和和美美。 一、介绍 在Hadoop2.4之前,ResourceManager是YARN集群中的单点故障 ResourceManager HA是通过 Active/St…

[职场] 公安管理学就业方向及前景 #媒体#笔记#笔记

公安管理学就业方向及前景 公安管理学是中国普通高等学校本科专业。本专业文理兼收,学制4年,授予法学学士学位。本专业培养掌握马克思主义基本原理,政治坚定,坚持党和国家的路线、方针、政策,具有良好职业素养、科学素…

Makefile编译原理 make 中的路径搜索_1

一.make中的路径搜索 问题:在实际的工程项目中,所有的源文件和头文件都放在同一个文件夹中吗? 实验1 : VPATH 引子 mhrubuntu:~/work/makefile1/17$ ll total 28 drwxrwxr-x 4 mhr mhr 4096 Apr 22 00:46 ./ drwxrwxr-x 7 mhr m…

双指针-two pointers的应用

1.枚举输出解法&#xff1a; #include <iostream> using namespace std; int num[1000]; int main(){int result,n;cin>>result>>n;for(int i0;i<n;i)cin>>num[i];for(int i0;i<n;i)for(int ji1;j<n;j)if(num[i]num[j]result)cout<<nu…

操作系统——内存管理(附带Leetcode算法题LRU)

1.内存管理主要用来干什么&#xff1f; 操作系统的内存管理主要负责内存的分配与回收、内存扩充(虚拟技术)、地址转换(逻辑-物理)、内存保护(保证各进程在自己的内存空间运行&#xff0c;不会越界访问)..... 2.什么是内存碎片&#xff1f; 内存碎片是内存的申请和释放产生的…