uniapp 使用 pinia 状态持久化
1.创建文件
stores
-index.js
-global.js
2.对应文件内容 index.js
安装插件 npm i pinia-plugin-persistedstate
import { createPinia } from 'pinia';
import persist from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(persist);
export default pinia;
3.对应文件内容 global.js
import { defineStore } from 'pinia';
import { ref,reactive } from "vue";export const useGlobalStore = defineStore('global', () => {const tabBarStatus = ref('1');const system = ref({})const changeTabBarStatus = (status) => {tabBarStatus.value = status; // 示例:改变 tabBarStatus 的值};const setSystem=(options)=>{system.value=options;}const getSystem=()=>{return system.value;}return { tabBarStatus, system,changeTabBarStatus,setSystem,getSystem};
},
{// 网页端配置// persisit:true,// 小程序端 修改其设置 获取方法persist:{storage:{getItem(key){return uni.getStorageSync(key);},setItem(key,value){uni.setStorageSync(key,value);}}}});
4.注册到main.js中
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({...App
})
app.$mount()
// #endif// #ifdef VUE3
import { createSSRApp } from 'vue'
import pinia from '@/stores/index'
export function createApp() {const app = createSSRApp(App)app.use(pinia);return {app}
}
// #endif
如果想在utils 下的工具中使用可以使用一下写法
import pinia from '@/stores/index.js'
import { useGlobalStore } from "@/stores/global";
const globalStore = useGlobalStore(pinia)
export default {getUploadImageDomainName(){return globalStore.system.img_host;}
}
相关文章:
uniapp 使用 pinia 状态持久化
1.创建文件 stores -index.js -global.js2.对应文件内容 index.js 安装插件 npm i pinia-plugin-persistedstate import { createPinia } from pinia; import persist from pinia-plugin-persistedstate; const pinia createPinia(); pinia.use(persist); export default pi…...
HarmonyOS鸿蒙-@State@Prop装饰器限制条件
一、组件Components级别的状态管理: State组件内状态限制条件 1.State装饰的变量必须初始化,否则编译期会报错。 // 错误写法,编译报错 State count: number;// 正确写法 State count: number 10; 2.嵌套属性的赋值观察不到。 // 嵌套的…...
Java Web开发进阶——Spring Boot与Spring Data JPA
Spring Data JPA 是 Spring 提供的一种面向数据访问的持久化框架,它简化了 JPA 的实现,为开发者提供了一种快速操作数据库的方式。在结合 Spring Boot 使用时,开发者能够快速完成数据库访问层的开发。 1. 介绍Spring Data JPA 1.1 什么是Spr…...
Vue Router4
Vue Router 是 Vue.js 官方的路由管理器。Vue Router 基于路由和组件的映射关系,监听页面路径的变化,渲染对应的组件。 安装: npm install vue-router。 基本使用: // src/router/index.js import {createRouter, createWebHa…...
计算机网络之---应用层协议概述
应用层协议概述 应用层协议是OSI模型中的第7层(应用层)定义的一组规则,用于支持和管理不同应用程序之间的通信。应用层协议定义了数据交换的格式、规则和约定,使得不同的系统或应用能够互相理解并正确地交换数据。它直接面向用户并…...
html + css 顶部滚动通知栏示例
前言 在现代网页设计中,一个吸引人的顶部滚动通知栏不仅能够有效传达重要信息,还能提升用户体验。通过使用HTML和CSS,我们可以创建既美观又功能强大的组件,这些组件可以在不影响网站整体性能的情况下提供实时更新或紧急通知。 本…...
【Rust自学】11.6. 控制测试运行:并行和串行(连续执行)测试
喜欢的话别忘了点赞、收藏加关注哦,对接下来的教程有兴趣的可以关注专栏。谢谢喵!(・ω・) 11.6.1. 控制测试的运行方式 cargo test和cargo run一样,cargo test也会编译代码并生成一个二进制文件用于测试,…...
某漫画网站JS逆向反混淆流程分析
文章目录 1. 写在前面1. 接口分析2. 反混淆分析 【🏠作者主页】:吴秋霖 【💼作者介绍】:擅长爬虫与JS加密逆向分析!Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守并致力于Pyth…...
React 中事件机制详细介绍:概念与执行流程如何更好的理解
React 的事件机制是一个非常重要的概念,它涉及到 React 如何处理用户的交互事件。React 的事件系统与传统的 DOM 事件系统有所不同,它在底层使用了事件委托和合成事件(Synthetic Events)来优化性能。下面,我们将从 Rea…...
Day04-后端Web基础(Maven基础)
目录 Maven课程内容1. Maven初识1.1 什么是Maven?1.2 Maven的作用1.2.1 依赖管理1.2.2 项目构建1.2.3 统一项目结构 2. Maven概述2.1 Maven介绍2.2 Maven模型2.3 Maven仓库2.4 Maven安装2.4.1 下载2.4.2 安装步骤 3. IDEA集成Maven3.1 配置Maven环境3.1.2 全局设置 3.2 Maven项…...
vue3模板语法+响应式基础
模板语法 1. disabled指令,可以用于禁用按钮 <button :disabled"isButtonDisabled">Button</button> //:disabled是一个指令,用于根据isButtonDisabled的值来动态控制按钮的禁用状态。 使用场景: 1.防止用户重复点击…...
【面试题】简单聊一下什么是云原生、什么是k8s、容器,容器与虚机相比优势
云原生(Cloud Native) 定义:云原生是一种构建和运行应用程序的方法,旨在充分利用云计算的优势。它涵盖了一系列技术和理念,包括容器化、微服务架构、自动化部署与管理等。特点:云原生应用程序被设计为可弹性…...
数据挖掘实训:天气数据分析与机器学习模型构建
随着气候变化对各行各业的影响日益加剧,精准的天气预测已经变得尤为重要。降雨预测在日常生活中尤其关键,例如农业、交通和灾害预警等领域。本文将通过机器学习方法,利用历史天气数据预测明天是否会下雨,具体内容包括数据预处理、…...
STM32如何使用内部晶振作为晶振
目录 前言 首先说明一下芯片内部并没有时钟, 而是内部振荡。使用内部振荡的好处是外部无需设计晶振电路 ,再说的简单点 ,不用外部晶振依然可以让单片机正常运转。 环境: 芯片:STM32F103C8T6 Keil:V5.24…...
【Maui】导航栏样式调整
前言 .NET 多平台应用 UI (.NET MAUI) 是一个跨平台框架,用于使用 C# 和 XAML 创建本机移动和桌面应用。 使用 .NET MAUI,可从单个共享代码库开发可在 Android、iOS、macOS 和 Windows 上运行的应用。 .NET MAUI 是一款开放源代码应用,是 X…...
【黑马程序员三国疫情折线图——json+pyechart=数据可视化】
json数据在文末 将海量的数据处理成我们肉眼可以进行分析的形式,数据的可视化,可以分为两个步骤: 数据处理:利用三方网站厘清json层次格式化,再对文件的读取、检查是否符合JSON规范以及规范化、JSON格式的转化&#…...
如何实现多级缓存?
本文重点说一说在Java应用中,多级缓存如何实现。 多级缓存是比较常见的一种性能优化的手段,一般来说就是本地缓存分布式缓存。 本地缓存一般采用Caffeine和Guava,这两种是性能比较高的本地缓存的框架。他们都提供了缓存的过期、管理等功能。…...
Saas数据库迁移单租户数据
1、背景 租户使用Saas系统,用一段时间后要将系统、数据搬迁到自建服务器。该Saas系统没有按租户分库,且数据库数据量太大,需要将单租户的数据抽取出来。Saas系统使用Mysql5.7数据库,主要使用INFORMATION_SCHEMA.COLUMNS表进行数据…...
LeetCode100之括号生成(22)--Java
1.问题描述 数字 n 代表生成括号的对数,请你设计一个函数,用于能够生成所有可能的并且 有效的 括号组合。 示例1 输入:n 3 输出:["((()))","(()())","(())()","()(())","()()()&qu…...
阿里云ios镜像源
阿里云镜像源:阿里巴巴开源镜像站-OPSX镜像站-阿里云开发者社区 下载centos7...
日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下,越来越多的求职者将目光投向了日本及中日双语岗位。但是,一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧?面对生疏的日语交流环境,即便提前恶补了…...
.Net框架,除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术,可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势,还能有效评价重大生态工程…...
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码: https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列,以便知晓哪些列包含有价值的数据,…...
