uniapp vue3项目定义全局变量,切换底部babar时根据条件刷新页面

前言

uniapp项目中,每个tabbar页面来回点时候,不会触发页面更新。但是有时页面上有数据发生改变需要更新模版时,就得能及时的通知到页面。如果在onshow生命周期里每次都调用异步请求更新数据,有些不合理,况且页面有时不需要更新。
经过思考,我们可以定义一个全局变量,根据全局变量的值来看是否需要更新数据。

开始

细化需求举例:下图是我的聊天记录列表。
当我有新的聊天时,点击“对话”tabbar需要更新此列表。
当无新聊天时,点击此“对话”tabbar不做任何动作。
在这里插入图片描述

首先定义全局变量:
根目录/src/utils/globleState.js:

import { ref,reactive } from "vue"let gloableState = reactive({chatListIsRefresh:false,  // 是否需要刷新聊天记录列表collectListIsRefresh:false
})
export function useGloableState(){return gloableState
}

在聊天记录页面这样用:
src/pages/chatList/chatList.vue

<script setup>import {useGloableState} from '@/utils/gloableState.js'let gloableState = useGloableState()getChatList(){let res = await ... // 异步请求取最新的聊天记录列表gloableState.chatListIsRefresh = false; // 更新全局变量,表示聊天列表已是最新}onShow(() => {if(gloableState.chatListIsRefresh){ // 如果检测到需要更新聊天记录列表才重新请求数据getChatList() // 重新请求数据}});
</script>

在聊天页面,如果有新聊天,去更新全局变量为true,表示有新聊天,需要刷新聊天记录列表:
src/pages/chat/chat.vue

<script setup>import {useGloableState} from '@/utils/gloableState.js'let gloableState = useGloableState()chat(){... // 此处为发送聊天逻辑gloableState.chatListIsRefresh = true; // 更新全局变量,表示聊天列表需要更新}
</script>

后记

在此记录问题解决方法,也给需要的朋友们一个思路。有问题可以留言我们一起讨论。

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

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

相关文章

vulnhub-Hackme-隧道建立、SQL注入、详细解题、思路清晰。

vulnhub-Hackme-隧道建立、SQL注入、详细解题、思路清晰。 一、信息收集 2025.3.14 PM 12&#xff1a;18 1、主机发现 arp-scan -l nmap -sn 192.168.66.0/24 2、端口扫描 1、nmap --min-rate 10000 -p- 192.168.66.182 -oA port 查看所有开放端口2、map -sS -sV 192.168.6…

20250317笔记本电脑在ubuntu22.04下使用acpi命令查看电池电量

20250317笔记本电脑在ubuntu22.04下使用acpi命令查看电池电量 2025/3/17 18:05 百度&#xff1a;ubuntu查看电池电量 百度为您找到以下结果 ubuntu查看电池电量 在Ubuntu操作系统中&#xff0c;查看电池电量通常可以通过命令行或者图形界面来完成。下面是一些常见的方法&…

openEuler系统迁移 Docker 数据目录到 /home,解决Docker 临时文件占用大问题

根据错误信息 write /var/lib/docker/tmp/...: no space left on device&#xff0c;问题的根源是 根分区&#xff08;/&#xff09;的磁盘空间不足&#xff0c;而非 /home 分区的问题。以下是详细解释和解决方案&#xff1a; 问题原因分析 Docker 临时文件占用根分区空间&…

Java 大视界 -- Java 大数据在智能政务舆情引导与公共危机管理中的应用(138)

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…

Deepseek API+Python测试用例一键生成与导出-V1.0.2【实现需求文档图片识别与用例生成自动化】

在测试工作中&#xff0c;需求文档中的图片&#xff08;如界面设计图、流程图&#xff09;往往是测试用例生成的重要参考。然而&#xff0c;手动提取图片并识别内容不仅耗时&#xff0c;还容易出错。本文将通过一个自研小工具&#xff0c;结合 PaddleOCR 和大模型&#xff0c;自…

搭建opensbi+kernel+rootfs及基本设备驱动开发流程

目录 一.编译qemu 运行opensbikernelrootfs 1.编译qemu-9.1.1 2.安装riscv64编译器 3. 编译opensbi 4.编译kernel 5.编译rootfs 设备驱动开发流程 1.安装 RISC-V 交叉编译工具链 2.驱动开发准备 3.编写简易中断控制器驱动&#xff08;PLIC&#xff09;​ 4.配置内核…

16.使用读写包操作Excel文件:XlsxWriter 包

一 XlsxWriter 的介绍 XlsxWriter 只能写入 Excel 文件。 OpenPyXL 和 XlsxWriter 的区别在笔记 15 。 二 如何使用 XlsxWriter 1.导包 import datetime as dtimport xlsxwriterimport excel 2.实例化工作簿 book xlsxwriter.Workbook("xlxswriter.xlsx") book.clo…

LeetCode 124.二叉树中的最大路径和

题目&#xff1a; 二叉树中的 路径 被定义为一条节点序列&#xff0c;序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点&#xff0c;且不一定经过根节点。 路径和 是路径中各节点值的总和。 给你一个二叉树的根节点…

【Dubbo+Zookeeper】——SpringBoot+Dubbo+Zookeeper知识整合

&#x1f3bc;个人主页&#xff1a;【Y小夜】 &#x1f60e;作者简介&#xff1a;一位双非学校的大二学生&#xff0c;编程爱好者&#xff0c; 专注于基础和实战分享&#xff0c;欢迎私信咨询&#xff01; &#x1f386;入门专栏&#xff1a;&#x1f387;【MySQL&#xff0…

MCP 开放协议

本文翻译整理自&#xff1a; https://modelcontextprotocol.io/introduction 文章目录 简介一、关于 MCP二、为什么选择MCP&#xff1f;通用架构 三、开始使用1、快速入门2、示例 四、教程五、探索 MCP六、贡献和支持反馈贡献支持和反馈 服务器开发者一、构建服务器1、我们将要…

方差,协方差及协方差矩阵的计算

1.方差 方差是用来衡量一组数据的离散程度&#xff0c;数序表达式如下: σ 2 1 N ∑ i 1 N ( x i − μ ) 2 \sigma^2\frac1N\sum_{i1}^N(x_i-\mu)^2 σ2N1​i1∑N​(xi​−μ)2 σ 2 σ^2 σ2表示样本的总体方差&#xff0c; N N N 表示样本总数&#xff0c; x i x _i xi​…

【2025】基于python+django的慢性病健康管理系统(源码、万字文档、图文修改、调试答疑)

系统功能结构图如下 慢性病健康管理系统 课题背景 随着全球人口老龄化的加剧以及生活方式的改变&#xff0c;慢性病的发病率呈上升趋势&#xff0c;给个人健康和社会医疗资源带来了巨大压力。传统的慢性病管理模式存在信息不畅、患者参与度低、医疗资源分配不均等问题&#xf…

2.2 B/S架构和Tomcat服务器

本文介绍了B/S架构、Tomcat服务器及其与IDEA的整合。B/S架构是一种基于浏览器的网络计算模式&#xff0c;具有跨平台、易用性强的特点&#xff0c;适用于互联网应用。Tomcat是Apache开源的Web服务器&#xff0c;支持Java Web应用的部署和运行。文章通过实例演示了如何下载、安装…

QT非UI设计器生成界面的国际化

目的 UI设计器生成界面的国际化&#xff0c;比较容易实现些&#xff0c;因为有现成的函数可以调用&#xff0c;基本过程如下&#xff1a; void MainWindow::on_actLang_CN_triggered() {//中文界面qApp->removeTranslator(trans);delete trans;transnew QTranslator;trans…

Hackme靶机通关攻略

1&#xff0c;打开靶机和kali&#xff0c;在kali终端中扫描靶机ip,得到靶机ip为192.168.50.137 arp-scan -l 2&#xff0c;使用工具扫描出后台目录后访问login.php 3&#xff0c;注册后登陆发现有输入框&#xff0c;可以尝试使用sql注入来得到用户名和密码&#xff0c;密码需要…

国产编辑器EverEdit - 工具栏自定义及认识工具栏上的按钮

1 设置-高级-工具条 1.1 设置说明 1.1.1 工具条自定义 选择主菜单工具 -> 设置 -> 常规&#xff0c;在弹出的选项窗口中选择工具条分类&#xff0c;如下图所示&#xff1a; 左侧窗口是当前支持所有功能按钮列表(上图中居中栏)&#xff0c;右侧的窗口是当前显示在工具栏…

docker安装rabbitmq

第一步直接dokce拉取rabbitmq镜像docker 利用docker直接拉取镜像最新版&#xff1a;docker search rabbitmq 运行mq&#xff1a; 需要注意的是-p 5673:5672 解释&#xff1a;-p 外网端口&#xff1a;docker的内部端口 &#xff0c;你们可以改成自己的外网端口号&#xff0c;我这…

【实战ES】实战 Elasticsearch:快速上手与深度实践-8.2.2成本优化与冷热数据分离

&#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 文章大纲 8.2.2AWS OpenSearch Serverless 成本优化与冷热数据分离深度实践1. 成本构成分析与优化机会识别1.1 Serverless模式成本分布1.2 冷热数据特征分析数据特征矩阵 2. 冷热数据…

安卓edge://inspect 和 chrome://inspect调试移动设备上的网页

edge://inspect 和 chrome://inspect 是用于调试浏览器中运行的网页和移动设备上的网页的工具。这两个工具分别属于 Microsoft Edge 和 Google Chrome 浏览器。以下是它们的详细介绍&#xff1a; chrome://inspect 如果是直接使用数据线调试&#xff0c;则只需要执行下面的第一…

checkpoint机制

1、什么是checkpoint 将缓冲池中的脏页刷新到磁盘&#xff0c;并更新redo log的checkpoint位点&#xff0c;确保数据库在发生故障时可以快速恢复到一致的状态。 2、checkpoint执行过程 确保需要刷新的脏页&#xff1a;从缓冲池中选取一部分需要刷新的页数据页刷新&#xff1…