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

前言

uniapp项目中,每个tabbar页面来回点时候,不会触发页面更新。但是有时页面上有数据发生改变需要更新模版时,就得能及时的通知到页面。如果在onshow生命周期里每次都调用异步请求更新数据,有些不合理,况且页面有时不需要更新。

经过思考,我们可以定义一个全局变量,根据全局变量的值来看是否需要更新数据。

开始

细化需求举例:下图是我的聊天记录列表。

当我有新的聊天时,点击"对话"tabbar需要更新此列表。

当无新聊天时,点击此"对话"tabbar不做任何动作。

首先定义全局变量:

根目录/src/utils/globleState.js:

javascript 复制代码
import { ref,reactive } from "vue"

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

在聊天记录页面这样用:

src/pages/chatList/chatList.vue

javascript 复制代码
<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

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

后记

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

相关推荐
lqj_本人2 小时前
鸿蒙OS&UniApp 移动端直播流播放实战:打造符合鸿蒙设计风格的播放器#三方框架 #Uniapp
华为·uni-app·harmonyos
lqj_本人2 小时前
鸿蒙OS&UniApp复杂表单与动态验证实践:打造高效的移动端表单解决方案#三方框架 #Uniapp
华为·uni-app·harmonyos
西哥写代码4 小时前
基于cornerstone3D的dicom影像浏览器 第二十七章 设置vr相机,复位视图
3d·vue3·vr·cornerstonejs
iOS阿玮4 小时前
别让AI写的代码,成为Appstore上架的绊脚石
uni-app·app·apple
^Rocky20 小时前
微信小程序(uniapp)实现腾讯云 IM 消息撤回
微信小程序·uni-app·腾讯云
西哥写代码21 小时前
基于cornerstone3D的dicom影像浏览器 第二十五章 自定义VR调窗工具
javascript·3d·vue3·vr·cornerstonejs
疯狂的沙粒1 天前
uniapp开发企业微信小程序时 wx.qy.login 在uniapp中使用的时候,需要导包吗?
前端·javascript·微信小程序·小程序·uni-app
~央千澈~1 天前
UniApp X:鸿蒙原生开发的机会与DCloud的崛起之路·优雅草卓伊凡
uni-app·uniapp
唐人街都是苦瓜脸1 天前
uni-app 提供的页面跳转方法详细解释及其区别
前端·uni-app
疯狂的沙粒1 天前
uniapp 开发企业微信小程序时,如何在当前页面真正销毁前或者关闭小程序前调用一个api接口
微信小程序·小程序·uni-app