Uniapp安装Pinia并持久化(Vue3)

安装pinia

在uni-app的Vue3版本中,Pinia已被内置,无需额外安装即可直接使用(Vue2版本则内置了Vuex)。

  • HBuilder X项目:直接使用,无需安装。
  • CLI项目:需手动安装,执行yarn add pinia@2.0.36npm install pinia@2.0.36

编辑器环境HBuilderX4.29

安装Pinia持久化插件

npm i pinia-plugin-persistedstate

根目录下创建stores文件夹,新建index.js文件

import { createPinia } from "pinia";
// 引入持久化插件
import persist from "pinia-plugin-persistedstate";const pinia = createPinia();
// 使用持久化插件
pinia.use(persist);export default pinia;import {usetestStore
} from "./modules/test.js";// 简写
export * from "./modules/test.js";

main.js下添加挂载pinia代码

import { createSSRApp } from "vue";
import App from "./App";
import pinia from "@/stores/index.js";export function createApp() {const app = createSSRApp(App);app.use(pinia);return {app};
}

在stores目录下新建modules文件夹,在其下新建test.js测试代码

// /stores/modules/test.js
import { defineStore } from "pinia";export const usetestStore = defineStore("user", {state: () => ({name: "John Doe",age: 30}),actions: {updateName(newName) {this.name = newName;},incrementAge() {this.age++;}},persist: {storage: {// 修改存储方式getItem: uni.getStorageSync,setItem: uni.setStorageSync}}
});

image-20241106125017473

在test页面,添加如下测试代码测试效果

<template><view class="container"><text>Name: {{ user.name }}</text><text>Age: {{ user.age }}</text><button @click="incrementAge">Increment Age</button></view>
</template><script setup>import {usetestStore} from "@/stores/modules/test";// 直接使用 useUserStore 钩子函数const user = usetestStore();// 定义一个方法来增加年龄和修改姓名const incrementAge = () => {user.incrementAge();user.name = "helloWorld";};
</script>
<style lang="scss" scoped>.container {margin-top: 200rpx;}text {margin-left: 20rpx;}
</style>

启动运行后查看微信小程序test页面,可以看到pinia已经持久化保存到缓存里

image-20241106125530420

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

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

相关文章

<网络> 协议

目录 文章目录 一、认识协议 1. 协议概念 2. 结构化数据传输 3. 序列化和反序列化 二、网络计算器 1. 封装socket类 2. 协议定制 request类的序列化和反序列化 response类的序列化和反序列化 报头的添加与去除 Json序列化工具 Jsoncpp 的主要特点: Jsoncpp 的使用方法: 3. Ser…

群控系统服务端开发模式-应用开发-文件上传功能开发

一、文件上传路由 在根目录下route文件夹中app.php文件中&#xff0c;添加文件上传功能路由&#xff0c;代码如下&#xff1a; Route::post(upload/file,common.Upload/file);// 上传文件接口 二、功能代码开发 在根目录下app文件夹下common文件夹中创建上传控制器并命名为Up…

pycharm小游戏贪吃蛇及pygame模块学习()

由于代码量大&#xff0c;会逐渐发布 一.pycharm学习 在PyCharm中使用Pygame插入音乐和图片时&#xff0c;有以下这些注意事项&#xff1a; 插入音乐&#xff1a; - 文件格式支持&#xff1a;Pygame常用的音乐格式如MP3、OGG等&#xff0c;但MP3可能需额外安装库&#xf…

检索增强和知识冲突学习笔记

检索增强生成任务&#xff08;Retrieval-Augmented Generation, RAG&#xff09;是一种自然语言处理技术&#xff0c;它结合了信息检索和生成模型&#xff0c;用于生成高质量的文本输出。具体来说&#xff0c;RAG 模型在生成文本时&#xff0c;会先通过检索模块从外部知识库或文…

从0开始深度学习(25)——多输入多输出通道

之前我们都只研究了一个通道的情况&#xff08;二值图、灰度图&#xff09;&#xff0c;但实际情况中很多是彩色图像&#xff0c;即有标准的RGB三通道图片&#xff0c;本节将更深入地研究具有多输入和多输出通道的卷积核。 1 多输入通道 当输入包含多个通道时&#xff0c;需要…

网管平台(进阶篇):如何正确的管理网络设备?

网络设备作为构建计算机网络的重要基石&#xff0c;扮演着数据传输、连接和管理的关键角色。从交换机、路由器到防火墙、网关&#xff0c;各类网络设备共同协作&#xff0c;形成了高效、稳定的网络系统。本文将详细介绍网络设备的种类&#xff0c;并探讨如何正确管理这些设备&a…

论文 | Teaching Algorithmic Reasoning via In-context Learning

这篇论文《通过上下文学习教授算法推理》探讨了如何通过上下文学习&#xff08;In-context Learning, ICL&#xff09;有效训练大型语言模型&#xff08;LLMs&#xff09;以进行算法推理。以下是从多个角度对这项工作的详细解读&#xff1a; 1. 问题陈述与研究动机 算法推理的…

RK3568平台(基础篇)性能分析工具

一.Linux 性能优化工具简介 Linux 系统性能指标无非就是这几个方面,CPU、内存、磁盘 I/O、文件系统、网络等相关指标。不同的性能指标都有对应的具体命令工具进行查看与监控,接下来我们将介绍一些常见的 Linux 系统性能指标及其对应的命令工具(通过命令工具找出 Linux 系统性…

2024阿里云CTF Web writeup

《Java代码审计》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484219&idx1&sn73564e316a4c9794019f15dd6b3ba9f6&chksmc0e47a67f793f371e9f6a4fbc06e7929cb1480b7320fae34c32563307df3a28aca49d1a4addd&scene21#wechat_redirect 前言 又是周末…

Bartender 5 for Mac 菜单栏管理软件 安装教程【保姆级教程,操作简单小白轻松上手使用】

Mac分享吧 文章目录 Bartender 5 for Mac 菜单栏管理软件 安装完成&#xff0c;软件打开效果一、Bartender 5 菜单栏管理软件 Mac电脑版——v5.2.3⚠️注意事项&#xff1a;1️⃣&#xff1a;下载软件2️⃣&#xff1a;安装软件3️⃣&#xff1a;打开软件&#xff0c;根据自己…

职场逆袭!学会管理上司,你也能成为职场赢家

书友们&#xff0c;不要错过了&#xff01;我挖到了一本真正让我彻夜难眠的小说&#xff0c;情节跌宕起伏&#xff0c;角色鲜活得就像从书里跳出来陪你聊天。每一页都是新的惊喜&#xff0c;绝对让你欲罢不能。要是你也在寻找那种让人上瘾的阅读体验&#xff0c;这本书就是你的…

Actor-Critic方法【A2C,A3C,Policy Gradient】

强化学习笔记系列目录 第一章 强化学习基本概念 第二章 贝尔曼方程 第三章 贝尔曼最优方程 第四章 值迭代和策略迭代 第五章 强化学习实例分析:GridWorld 第六章 蒙特卡洛方法 第七章 Robbins-Monro算法 第八章 多臂老虎机 第九章 强化学习实例分析:CartPole 第十章 时序差分法…

若依管理系统使用已有 Nacos 部署流程整理

背景 玩了一下开源项目 RuoYi 管理系统Cloud 版&#xff0c;卡住的地方是&#xff1a;它用到了 nacos 配置管理&#xff0c;如果用的 nacos 环境是单机且是内置数据库的话&#xff0c;该怎么配置呢&#xff1f; 本文整理本机启动 RuoYi Cloud 应用本地部署的过程&#xff0c;…

数字信号处理-FPGA插入不同误码率的模拟源

module data_error_injector (input clk, // 时钟信号&#xff0c;50MHzinput reset, // 复位信号&#xff0c;高有效input DIN_EN, // 数据输入使能&#xff0c;高有效input [7:0] ERROR_LEVEL, // 错误等级…

对称二叉树(力扣101)

题目如下: 思路 对于这道题, 我会采用递归的解法. 看着对称的二叉树, 写下判断对称的条件, 再进入递归即可. 值得注意的是, 代码中会有两个函数, 第一个是isSymmetric,第二个是judge. 因为这里会考虑到一种特殊情况, 那就是 二叉树的根结点(最上面的那个),它会单独用…

山东布谷科技:关于直播源码|语音源码|一对一直播源码提交App Store的流程及重构建议

自从YY、六间房开启国内聊天室和秀场等网红盛行的网络红利时代以来&#xff0c;紧随其后国内各大音视频平台相应出现&#xff0c;先有映客花椒等直播平台的风头正劲&#xff0c;后有功能板块更丰富的头条抖音Tiktok等&#xff0c;盈利功能点不仅仅有直播PK连麦等礼物打赏功能&a…

k8s图形化显示(KRM)

在master节点 kubectl get po -n kube-system 这个命令会列出 kube-system 命名空间中的所有 Pod 的状态和相关信息&#xff0c;比如名称、状态、重启次数等。 systemctl status kubelet #查看kubelet状态 yum install git #下载git命令 git clone https://gitee.com/duk…

ArcGIS地理空间平台 manager 任意文件读取漏洞复现

0x01 产品描述&#xff1a; ‌ ArcGIS‌是一个综合的地理空间平台&#xff0c;由Esri开发&#xff0c;旨在为专业人士和组织提供全面的地理信息系统&#xff08;GIS&#xff09;功能。ArcGIS通过集成和连接地理环境中的数据&#xff0c;支持创建、管理、分析、映射和共享…

【Rust实现命令模式】

Rust实现命令模式 什么是命令模式命令模式的应用场景命令模式的在Rust中的关系图Rust中的命令模式代码示例运行结果总结 什么是命令模式 命令模式,即通过统一接口,如C#interface,亦或C中的抽象类的0方法,通过定义统一的接口,在定义不同的对象,为之接口实现具体的方法逻辑,再通…

【学术论文投稿】React全攻略:构建高性能前端应用的黄金法则

第六届国际科技创新学术交流大会暨管理科学信息化与经济创新发展学术会议&#xff08;MSIEID 2024&#xff09;_艾思科蓝_学术一站式服务平台 更多学术会议论文投稿请看&#xff1a;https://ais.cn/u/nuyAF3 目录 引言 1. React简介 2. React的三大核心概念 2.1 JSX 2.2…