【uni-app】Pinia 持久化

小程序端 Pinia 持久化

说明:Pinia 用法与 Vue3 项目完全一致,uni-app 项目仅需解决持久化插件兼容性问题。

持久化存储插件

安装持久化存储插件: pinia-plugin-persistedstate


pnpm i pinia-plugin-persistedstate

插件默认使用 localStorage 实现持久化,小程序端不兼容,需要替换持久化 API。

基本用法

import { defineStore } from 'pinia'
import { ref } from 'vue'// 定义 Store
export const useMemberStore = defineStore('member',() => {// 会员信息const profile = ref<any>()// 保存会员信息,登录时使用const setProfile = (val: any) => {profile.value = val}// 清理会员信息,退出时使用const clearProfile = () => {profile.value = undefined}// 记得 returnreturn {profile,setProfile,clearProfile,}},// TODO: 持久化{// 网页端的配置// persist: true,// 小程序端的配置persist: {storage: {getItem: (key: string) => uni.getStorageSync(key),setItem: (key: string, value: string) => uni.setStorageSync(key, value)},},},
)
// src/stores/index.ts
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
​
// 创建 pinia 实例
const pinia = createPinia()
// 使用持久化存储插件
pinia.use(persist)
​
// 默认导出,给 main.ts 使用
export default pinia
​
// 模块统一导出
export * from './modules/member'
// main.ts
import { createSSRApp } from 'vue'
import pinia from './stores'
​
import App from './App.vue'
export function createApp() {const app = createSSRApp(App)
​app.use(pinia)return {app,}
}

多端兼容

网页端持久化 API


// 网页端API
localStorage.setItem()
localStorage.getItem()

多端持久化 API


// 兼容多端API
uni.setStorageSync()
uni.getStorageSync()

原理

image.png

可以看到 persist 默认接收一个 boolean。表示是否开启持久化,而且默认持久化网页端。

image.png

此时我们是小程序端,就需要在 storage 中进行配置持久化的地方。

image.png

这里接收两个配置项 getItem 和 setItem,代表持久化的 setter 和 getter。

Configuration | pinia-plugin-persistedstate (prazdevs.github.io)

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

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

相关文章

MySQL——JDBC编程

目录 前言 一、JDBC概述 二、准备工作 1.下载MySQL的JDBC驱动包 2.把jar引入到项目中 三、JDBC编程 1.插入操作 2.查询操作 尾声 前言 本篇文章主要介绍如何利用Java代码进行操作数据库&#xff0c;在实际开发中&#xff0c;绝大多数对数据库的操作我们都是通过代码进行…

aop整理

一、aop基础知识 Spring AOP 详细深入讲解代码示例 二、spring/spring boot/spring cloud中出现的注解/类与概念的对应 Aspect&#xff1a; 标注当前MyAspect是一个切面类&#xff0c;–》对应切面的概念&#xff0c;在切面类中有用Before等注解修饰的方法作为advice,也有用…

uni-app全局弹窗的实现方案

背景 为了解决uni-app 任意位置出现弹窗 解决方案 一、最初方案 受限于uni-app 调用组件需要每个页面都引入注册才可以使用&#xff0c;此方案繁琐&#xff0c;每个页面都要写侵入性比较强 二、改进方案 app端&#xff1a;新建一个页面进行跳转&#xff0c;可以实现伪弹窗…

筛选的艺术:数组元素的精确提取

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、筛选的基本概念 二、筛选的实际应用案例 1. 筛选能被三整除的元素 2. 筛选小于特定值…

C++ list类

目录 0.前言 1.list介绍 1.1优势 1.2劣势 1.3容器属性 2.list使用 2.1构造函数 2.1.1默认构造函数 2.1.2填充构造函数 2.1.3范围构造函数 2.1.4拷贝构造函数 2.1.5初始化列表构造函数 2.2迭代器 2.2.1 begin() 2.2.2 end() 2.2.3 cbegin() 2.2.4 cend() 2.2.…

【C#】中托管与非托管对象区别、托管与非托管DLL区别

C 中的托管与非托管的区别_托管程序和非托管程序-CSDN博客 C# 中托管与非托管对象区别 在C#中&#xff0c;托管对象和非托管对象的主要区别在于内存管理和执行环境&#xff1a; 托管对象 (Managed Objects) 内存管理&#xff1a;托管对象的内存由.NET运行时&#xff08;CLR…

什么是CAS?

CAS&#xff08;比较并交换&#xff0c;Compare And Swap&#xff09;是一种多线程并发编程中的原子操作。它是一种乐观锁技术&#xff0c;用于解决 多线程环境下的数据竞争问题。CAS操作通过比较内存中的值与预期值是否相等来确定是否进行交换&#xff0c;如果相等&#xff0c…

PyMySQL连接池

背景 在用python写后端服务时候&#xff0c;需要与mysql数据库进行一些数据查询或者插入更新等操作。启动服务后接口运行一切正常&#xff0c; 隔了第二天去看服务日志就会报错&#xff0c;问题如下&#xff1a; pymysql.err.OperationalError: (2006, "MySQL server ha…

JavaScript-内存分配

内存空间 内存分为栈和堆 栈&#xff1a;由操作系统自动释放存放的变量值和函数值等。简单数据类型存放在栈中 栈会由低到高先入后出 堆&#xff1a;存储引用类型 &#xff08;对象&#xff09; 对象会先将数据存放在堆里面&#xff0c;堆的地址放在栈里面

关于virtualBox PC掉电后系统消失的解决方法

我们经常被会遇到笔记本电脑没电了&#xff0c;系统重新启动的情况。 这样会有出现虚拟机正在工作的时候&#xff0c;重启&#xff0c;导致虚拟机下次重启&#xff0c;系统出现问题。 直接上干货&#xff1a; 问题错误码 UUID {4105263a-f9d6-460e-b1e1-072377179af9} of the …

数字孪生智慧车站:全方位可视化管理平台

运用图扑数字孪生技术&#xff0c;智慧车站可视化管理平台实时模拟并监控车站运行状态&#xff0c;通过整合即时数据与历史数据&#xff0c;提供精准分析和预测。该平台支持乘客流量管理、设备运行监控、安全预警等多项功能&#xff0c;提高车站运营效率与安全性。直观的可视化…

N1 one-hot编码

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊# 前言 前言 onehot编码在机器学习比较常见&#xff0c;例如推荐系统中类别变量的处理等。 onehot 编码简介 One-hot编码&#xff08;one-hot encoding&…

进程发起DNS请求会fork进程吗

0 发起DNS请求本身并不会导致fork进程。当一个进程需要进行DNS解析时&#xff0c;它会使用操作系统提供的库函数&#xff08;如getaddrinfo、gethostbyname等&#xff09;发起DNS查询。这些库函数会通过网络接口向DNS服务器发送查询请求&#xff0c;并等待DNS服务器返回查询结…

这个橙子真的香!老司机徒手把玩香橙派Kunpeng Pro事后回忆录

说&#xff01;你是哪个门派&#xff1f; 香橙&#xff0c;芸香科柑橘属小乔木。枝通常有粗长刺&#xff0c;新梢及嫩叶柄常被疏短毛。叶厚纸质&#xff0c;翼叶倒卵状椭圆形&#xff0c;顶部圆或钝。。。 咦&#xff1f;小李&#xff1f;我们不是搞IT的嘛&#xff0c;怎么会有…

esp32s3 库函数功能解析

定时器 esp_restart 函数的主要功能是触发整个系统的重新启动。调用此函数后&#xff0c;ESP32 芯片会执行以下操作&#xff1a; 保存当前状态&#xff08;如果需要&#xff09;&#xff1a;在一些应用场景中&#xff0c;可能需要在重启前保存当前系统状态&#xff0c;比如日…

(函数)求一元二次方程的根(C语言)

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h> # include <math.h>//声明函数&#xff1b; //判断条件等于0时&#xff1b; void zeor(double a, double b);//判断条件大于0时&#xff1b; void bigzeo…

浅谈 parallelStream和Stream 源码及其应用场景

上篇讲述了list.forEach()和list.stream().forEach() 异同点 谈到了并行流的概念&#xff0c;本篇则从源码出发&#xff0c;了解一下其原理。 一、流的初始操作流程 jdk8中 将Collection中加入了转换流的概念。 default Stream<E> stream() {return StreamSupport.str…

用wordpress模板搭建网站的好处

使用WordPress模板搭建网站的优势主要包括以下几点&#xff1a; 多样化选择&#xff1a;WordPress提供了数千种免费和付费模板&#xff0c;覆盖各种行业和风格&#xff0c;满足不同用户的需求。 易于使用和定制&#xff1a;WordPress界面简单易用&#xff0c;适合没有HTML或其…

第十三章 进程与线程

第十三章 进程与线程 程序与进程的概念 程序&#xff1a; 英文单词为Program&#xff0c;是指一系列有序指令的集合&#xff0c;使用编程语言所编写&#xff0c;用于实现一定的功能。 进程&#xff1a; 进程则是指启动后的程序&#xff0c;系统会为进程分配内存空间。 函数式…

【PingPong_注册安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞 …