当前位置: 首页 > news >正文

【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)

相关文章:

【uni-app】Pinia 持久化

小程序端 Pinia 持久化 说明&#xff1a;Pinia 用法与 Vue3 项目完全一致&#xff0c;uni-app 项目仅需解决持久化插件兼容性问题。 持久化存储插件 安装持久化存储插件&#xff1a; pinia-plugin-persistedstate pnpm i pinia-plugin-persistedstate插件默认使用 localStor…...

Flink 窗口

窗口&#xff08;Window&#xff09; 窗口是处理无限流的核心。 窗口将流分割成有限大小的“桶”&#xff0c;我们可以计算窗口中的数据。 窗口程序一般有键控流&#xff08;keyed streams&#xff09;的窗口程序 和 非键控流&#xff08;non-keyed streams&#xff09;的窗口…...

基于大模型和RAG技术实现的开源项目

基于大模型和RAG技术实现的开源项目 为解决大模型的不足&#xff0c;使用RAG技术增强大模型生成内容的针对性和可读性能力&#xff0c;有很多不错的开源项目。例如下面的项目。 1 ragflow 优点&#xff1a;可以对文档和知识库进行管理&#xff0c;构建不同的知识库&#xff…...

mac m1安装homebrew管理工具(brew命令)完整流程

背景 因为mac上的brew很久没用了&#xff0c;版本非常旧&#xff0c;随着mac os的更新&#xff0c;本机的homebrew大部分的功能都无法使用&#xff0c;幸好过去通过brew安装的工具比较少&#xff0c;于是决定重新安装一遍brew。 卸载旧版brew 法一&#xff1a;通过使用线上…...

Liunx学习随笔

Linux学习随笔 Linux学习随笔一.前期准备1.安装Vmware Workstation软件2.下载linux镜像3.安装操作系统4.配置静态ip5.下载安装远程连接工具 二.语法2.1 linux哲学思想(原则)2.2 小命令 夕阳无限好&#xff0c;只是近黄昏&#xff0c;时隔一年&#xff0c;重新提笔 没有比脚更远…...

mac中文件夹怎么显示.git隐藏文件

1. 打开终端应用程序&#xff0c;然后进入到包含.git文件夹的目录&#xff0c;可以使用以下命令来显示隐藏文件和文件夹&#xff1a; defaults write com.apple.finder AppleShowAllFiles YES 2. 然后重启 Finder&#xff1a; killall Finder...

【PB案例学习笔记】-13 徒手做个电子时钟

写在前面 这是PB案例学习笔记系列文章的第11篇&#xff0c;该系列文章适合具有一定PB基础的读者。 通过一个个由浅入深的编程实战案例学习&#xff0c;提高编程技巧&#xff0c;以保证小伙伴们能应付公司的各种开发需求。 文章中设计到的源码&#xff0c;小凡都上传到了gite…...

Java多线程——线程强制执行

Join合并线程&#xff0c;待此线程执行完成后&#xff0c;再执行其他线程&#xff0c;其他线程阻塞。 可以想象成插队。 代码演示&#xff1a; //测试Join方法 //想象为插队 public class TestJoin implements Runnable{Overridepublic void run() {for (int i 0; i < 1…...

虹科Pico汽车示波器 | 免拆诊断案例 | 2017款奔驰E300L车行驶中发动机偶尔无法加速

故障现象 一辆2017款奔驰E300L车&#xff0c;搭载274 920发动机&#xff0c;累计行驶里程约为21万km。车主反映&#xff0c;该车行驶中发动机偶尔无法加速&#xff0c;且车辆发闯。 故障诊断 用故障检测仪检测&#xff0c;发动机控制单元&#xff08;N3/10&#xff09;中存储…...

华发股份:加强业务协同 新政下项目热销

“5.17”楼市政策出台后&#xff0c;各地密集落地执行。5月27—28日&#xff0c;上海、广州、深圳三个一线城市跟进落地“517”新政。上海发布《关于优化本市房地产市场平稳健康发展政策措施的通知》&#xff0c;共计9条调整政策&#xff0c;涵盖外地户籍、人才、单身、婚否、企…...

RedHat9网络配置设计

目录 一、实验目的 二、实验过程 1、配置新网络接口 2、多网卡配置网络 3、网络接口的绑定&#xff0c;进行远程访问 4、配置网络接口的组合 一、实验目的 本次实验的目的是使用nmcli命令工具配置网络&#xff0c;ens160配置多个网卡&#xff0c;进行网络接口的绑定与组合…...

HDR视频相关标准-HDR vivid(二)

上文介绍了HDRvivid的一些技术。今天从全局角度来看看HDR视频的处理流程&#xff0c;HDR视频系统&#xff0c;即建立一个比SDR视频更大的色彩/亮度坐标体系&#xff0c;并改变系统的传输函数&#xff0c;以再现更大的色域(WCG)和更高的亮度动态范围。 菁彩 HDR技术的专业术语 …...

uniapp或微信小程序一些问题解决

1.按钮边框如何去除&#xff1f; 参考博主&#xff1a;微信小程序按钮去不掉边框_微信小程序button去掉边框-CSDN博客文章浏览阅读1k次。最近在学uni-app&#xff0c;顺便自己写个小程序。左上角放了个button&#xff0c;可边框怎么也去不掉…原来微信小程序的按钮要去掉边框要…...

最长递增子序列,交错字符串

第一题&#xff1a; 代码如下&#xff1a; int lengthOfLIS(vector<int>& nums) {//dp[i]表示以第i个元素为结尾的最长子序列的长度int n nums.size();int res 1;vector<int> dp(n, 1);for (int i 1; i < n; i){for (int j 0; j < i; j){if (nums[i]…...

力扣:344. 反转字符串

344. 反转字符串 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间&#xff0c;你必须原地修改输入数组、使用 O(1) 的额外空间解决这一问题。 示例 1&#xff1a; 输入&#xff1a;s ["…...

linux Inodes满导致数据库宕机

项目经理反馈集群环境中有个节点无法使用了需要支援下&#xff0c;同时发过来截图说明磁盘还是有空的。 登录系统后直接发现问题 orcl2:/home/oracledb2> sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 Production on Wed May 29 13:59:21 2024 Copyright (c) 1982,…...

【STL】C++ stack(栈) 基本使用

目录 一 stack常见构造 1 空容器构造函数&#xff08;默认构造函数&#xff09; 2. 使用指定容器构造 3 拷贝构造函数 二 其他操作 1 empty 2 size 3 top 4 push && pop 5 emplace 6 swap 三 总结 一 stack常见构造 1 空容器构造函数&#xff08;默认构造…...

轻量级 K8S 环境 安装minikube

文章目录 操作系统DockerDocker CE 镜像源站使用官方安装脚本自动安装 &#xff08;仅适用于公网环境&#xff09;安装校验Docker代理docker permission denied while trying to connect to the Docker daemon socket minikubekubectl工具minikube dashboardminikube 基本命令参…...

市场巨变,移动开发行业即将迎来“第二春”?

随着鸿蒙生态的不断壮大&#xff0c;越来越多的企业开始加入其中&#xff0c;对鸿蒙OS开发工程师的需求也越来越迫切。 年初时还只有200个APP宣布加入鸿蒙生态&#xff0c;而最近华为也已经官宣&#xff0c;已经有4000多个应用加入鸿蒙&#xff0c;短短三个月就增加了20倍。 …...

DependencyCheck工具使用

1、工具下载地址 Releases jeremylong/DependencyCheck GitHub 2、工具使用 ./dependency-check.sh --disableRetireJS --disableNodeJS --project test -s /test/ -o /home/clog/test/report10 --noupdate...

Phi-4-mini-reasoning开发者调试手册:Chainlit后端日志定位、错误堆栈分析

Phi-4-mini-reasoning开发者调试手册&#xff1a;Chainlit后端日志定位、错误堆栈分析 1. 模型简介与部署验证 Phi-4-mini-reasoning 是一个基于合成数据构建的轻量级开源模型&#xff0c;专注于高质量、密集推理的数据&#xff0c;并进一步微调以提高更高级的数学推理能力。…...

APDS9960手势传感器驱动开发与嵌入式实战

1. APDS9960手势传感器库技术解析与嵌入式工程实践APDS9960是一款由Broadcom&#xff08;原Avago&#xff09;推出的集成环境光、颜色、接近度及手势识别功能的多模态光学传感器芯片。其核心价值在于将传统分立式光感方案&#xff08;如独立ALSProximityGesture模块&#xff09…...

用Simulink+Carsim复现论文:四轮转向后轮控制5种算法对比(附模型下载)

用SimulinkCarsim复现论文&#xff1a;四轮转向后轮控制5种算法对比&#xff08;附模型下载&#xff09; 在车辆动力学与控制领域&#xff0c;四轮转向技术正逐渐从豪华车型向主流市场渗透。不同于传统的前轮转向系统&#xff0c;四轮转向通过后轮主动参与转向&#xff0c;显著…...

Scratch飞翔小鸟游戏制作教程:从零开始打造你的第一个像素风小游戏

Scratch飞翔小鸟游戏制作教程&#xff1a;从零开始打造你的第一个像素风小游戏 当孩子们第一次接触编程时&#xff0c;往往会被复杂的代码和抽象的概念吓退。而Scratch就像一扇通往创意世界的大门&#xff0c;用积木式的编程方式让游戏开发变得触手可及。今天&#xff0c;我们将…...

SMR实战:如何将GWAS数据快速转换为BESD格式(附常见错误排查)

SMR实战&#xff1a;GWAS数据高效转换为BESD格式的完整指南与深度排错手册 在生物信息学研究中&#xff0c;基于汇总数据的孟德尔随机化&#xff08;Summary-data-based Mendelian Randomization, SMR&#xff09;已成为探索基因表达数量性状位点&#xff08;eQTL&#xff09;与…...

实战指南:基于快马平台与Playwright打造自动化的网站内容监测应用

今天想和大家分享一个非常实用的自动化监测方案——基于Playwright和InsCode(快马)平台搭建的新闻网站更新监测系统。这个项目特别适合需要追踪行业动态或竞品资讯的朋友&#xff0c;整个过程不需要复杂的服务器配置&#xff0c;用快马平台就能轻松实现部署和定时运行。 项目背…...

【分布式理论】CAP PACELC

文章目录一、引言二、CAP理论2.1 CAP分别指的是什么&#xff1f;2.2 CAP 的经典表述&#xff1a;三选二2.1 CP 系统&#xff08;牺牲可用性&#xff0c;保证一致性&#xff09;2.2 AP 系统&#xff08;牺牲一致性&#xff0c;保证可用性&#xff09;三、PACELC理论3.1 PACELC的…...

Janus-Pro-7B开发者案例:基于Gradio API构建私有AI内容中台

Janus-Pro-7B开发者案例&#xff1a;基于Gradio API构建私有AI内容中台 1. 项目概述 Janus-Pro-7B是DeepSeek发布的一款统一多模态理解与生成模型&#xff0c;它通过创新的架构设计解决了传统模型在理解与生成任务上的冲突问题。该模型支持图像问答、OCR识别、图表分析等理解…...

Phi-3-mini-4k-instruct-gguf代码实例:Python requests调用Web API完整示例

Phi-3-mini-4k-instruct-gguf代码实例&#xff1a;Python requests调用Web API完整示例 1. 模型简介 Phi-3-mini-4k-instruct-gguf是微软Phi-3系列中的轻量级文本生成模型GGUF版本&#xff0c;特别适合问答、文本改写、摘要整理和简短创作等场景。这个经过优化的版本可以直接…...

免费开源:如何用LiteDB.Studio高效管理嵌入式数据库?

免费开源&#xff1a;如何用LiteDB.Studio高效管理嵌入式数据库&#xff1f; 【免费下载链接】LiteDB.Studio A GUI tool for viewing and editing documents for LiteDB v5 项目地址: https://gitcode.com/gh_mirrors/li/LiteDB.Studio 在嵌入式数据库管理领域&#xf…...