uniapp 使用 pinia 状态持久化

server/2025/1/12 15:08:27/

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;}
}

http://www.ppmy.cn/server/157786.html

相关文章

TR-069协议学习--Soap报文、事件、RPC方法

目录 一、SOAP报文 二、事件 三、RPC方法 四、错误码 一、SOAP报文 SOAP(Simple Object Access Protocol,简单对象访问协议)是一种基于XML的协议,用于在网络上交换结构化信息。SOAP报文是SOAP协议中用于传输数据的XML文档…

C++ 多线程异步操作

C 多线程异步操作 文章目录 C 多线程异步操作std::future主要功能:如何使用 std::future1. 使用 std::async 和 std::future2. 使用 std::promise 和 std::future std::future 的常用方法注意事项使用模板函数与 std::async 结合 std::packaged_task主要特点工作原理…

SQLite 命令

关于《SQLite 命令》的文章,我可以为您提供一个概要。SQLite是一个轻量级的嵌入式关系数据库管理系统,它以单个文件的形式存储数据,非常适合用于不需要传统数据库服务器的场景。SQLite3的命令行工具(sqlite3.exe)是一个…

使用 Flask 搭建 Mock Server

使用 Flask 搭建 Mock Server 主要是通过模拟一些 HTTP 接口来返回预定的响应,这样前端或其他服务可以进行开发和测试,而无需依赖实际的后端服务。Flask 是一个非常轻量级的 Python Web 框架,因此非常适合用于构建 Mock Server。 以下将详细…

React 实战详细讲解:setState 是什么、如何更新及批量处理

在 React 中,setState 是用来更新组件状态的方法,它触发重新渲染组件的过程。理解 setState 的执行机制非常重要,特别是在大型应用中,它可以帮助你更高效地进行状态管理。 下面我们从 setState 的定义、更新类型、批量更新等方面…

PHP与ThinkPHP连接数据库示例

【图书介绍】《ThinkPHP 8高效构建Web应用》-CSDN博客 《2025新书 ThinkPHP 8高效构建Web应用 编程与应用开发丛书 夏磊 清华大学出版社教材书籍 9787302678236 ThinkPHP 8高效构建Web应用》【摘要 书评 试读】- 京东图书 使用VS Code开发ThinkPHP项目-CSDN博客 编程与应用开…

Copula算法原理和R语言股市收益率相依性可视化分析

阅读全文:http://tecdat.cn/?p6193 copula是将多变量分布函数与其边缘分布函数耦合的函数,通常称为边缘。在本视频中,我们通过可视化的方式直观地介绍了Copula函数,并通过R软件应用于金融时间序列数据来理解它(点击文…

AsyncOperation.allowSceneActivation导致异步加载卡死

先看这段代码,有个诡异的问题,不确定是不是bug public class Test : MonoBehaviour {void Start(){StartCoroutine(LoadScene(Ego.LoadingLevel));}IEnumerator LoadScene(string sceneName){LoadingUI.UpdateProgress(0.9f);yield return new WaitForS…