uniapp 使用 pinia 状态持久化

ops/2025/1/12 1:48:48/

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/ops/149310.html

相关文章

Android原生开发同一局域网内利用socket通信进行数据传输

1、数据接收端代码如下,注意:socket 接收信息需要异步运行: // port 端口号自定义一个值,比如 8888,但需和发送端使用的端口号保持一致 ServerSocket serverSocket new ServerSocket(port); while (true) {//这里为了…

解密Navicat密码(Java)

最近从Navicat换到了DBeaver,导出配置文件发现配置文件里的密码都是加密的,看网上的都是给的PHP代码,因为环境问题,就算是在线上运行的PHP代码也会报错,所以就把这段代码改成Java了。 package com.unicdata.system.con…

uniapp 导入uview-plus,使用组件出现,页面出现<up-parse>元素不存在,请检查你的代码

错误截图: 原因: 未按照官网方式进行配置,需要进行以下配置。具体详情 // pages.json {"easycom": {"autoscan": true,// 注意一定要放在custom里,否则无效,https://ask.dcloud.net.cn/question…

机器学习实战——决策树:从原理到应用的深度解析

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​​​ ​​​ ​​ 决策树(Decision Tree)是一种简单而直观的分类与回归模型,在机器学习中广泛应用。它的…

go中协程的生命周期

在 Go 中,协程(goroutine)的生命周期大致可以分为以下几个阶段: 1. 创建阶段 协程的创建通常是通过 go 关键字来启动的。例如: go func() {// 协程执行的代码 }()当执行 go func() 时,Go 会在后台启动一…

前端开发 vue 中如何实现 u-form 多个form表单同时校验

在 Vue 项目中使用 UView UI 的 u-form 组件时,多个表单同时校验的需求非常常见。例如,当我们有多个表单需要在同一个页面中进行校验并提交时,我们需要确保每个表单都能进行单独验证,同时可以在同一时刻进行批量验证。 接下来&am…

关于Mysql 中 Row size too large (> 8126) 错误的解决和理解

提示:啰嗦一嘴 ,数据库的任何操作和验证前,一定要记得先备份!!!不会有错; 文章目录 问题发现一、问题导致的可能原因 1、页大小2、行格式 2.1 compact格式2.2 Redundant格式2.3 Dynamic格式2.4…

利用 Java 爬虫从 yiwugo 根据 ID 获取商品详情

在当今数字化时代,数据是商业决策的关键。对于从事国际贸易的商家来说,精准获取商品的详细信息至关重要。yiwugo 是一个知名的国际贸易平台,拥有海量的商品数据。通过 Java 爬虫技术,我们可以高效地从 yiwugo 根据商品 ID 获取详细…