uni-app下,页面跳转后wacth持续监听的问题处理
uni-app下,页面跳转后wacth持续监听的问题处理
好久没写博客了,最近碰到了一个uni-app(vue2)开发小程序的问题,个人觉得很典型,所以拿出来给各位做个参考。
需求场景:
全局轮询用户权限。简单点说,就是用户登录后,要根据其权限判断是否能进入某个页面,或者控制使用某个功能之类的。由于权限可能会发生变化,前端就需要事实的进行响应。由于我是在登录后开始轮询用户权限接口,并保存在vuex中,并通过全局注入mixins使其变为全局变量,在需要用到的地方拿出来做处理。在否定了使用websocket之后,我决定使用watch在特定的页面去进行处理。
碰到的问题:
在A页面监听权限数据的时候,处理对应的业务逻辑,根据不同岗位权限显示不同的功能按钮。然而在跳转到B页面之后,发现其仍在继续执行监听内容。如果B页面也有wacth监听,两者会叠加,如果监听的也是该内容,会产生冲突甚至报错;再不济也会影响性能。第一感觉是因为navitagorTo的跳转方式导致的,因为A页面并没有被销毁掉,所以其仍会继续执行。所以讲跳转方式改为redirectTo进行验证,发现经过redirectTo跳转后,由于A页面被销毁,所以没有继续触发A页面的wacth。但业务逻辑上,不能直接销毁前页面,因为要返回。
解决思路:
1.在wacth的handler方法中加入条件判断;但这样仍然会触发wacth,只是不执行里面的内容。也不是我们想要的。
2.要解决这个问题,就得要在页面跳转前销毁掉wacth监听,但wact:{}写法显然不能销毁。
解决方案:
1.考虑到wacth是vue组件实例上挂载的一个对象方法(毕竟vue3的wacth是直接从vue中import出来的),所以决定丢弃传统的wacth:{}写法,改用**$watch**方法进行实现。
2.在app.vue中的globalData中加入全局变量:wather,根据其状态判断是否创建或销毁监听。
3.onShow生命周期中创建监听。onHide生命周期中移除监听。
代码:
// mixins中加入如下方法
methods: {
$createWatcher(name) {getApp().globalData.watcher = this.$watch('$userInfo.auth',val => {this[name](val)},{ deep: true, immediate: true })}
},
$removeWatcher() {// 检查是否有已存在的观察者if (getApp().globalData.watcher) {// 调用观察者返回的取消函数,即取消对特定属性的监听getApp().globalData.watcher()console.log('Watch 移除成功!')} else {console.log('没有观察者可移除!')}
}
//pageonShow() {// 此处传递的参数为函数名。所以methods里的函数要与此参数相同this.$createWatcher('changeAuth') },onHide() {this.$removeWatcher()},methods: {changeAuth(val) {// val为$createWatcher中$wacth传回的监听数据。以下内容与watch: {handler(val){}}的hander内的内容一致const authArr = val.filter(item => item.url === this.$utils.getRouter())const auth = authArr[0].children.filter(item => item.url === 'menu')[0].childrenthis.menu = auth}}
至此,问题解决
相关文章:
uni-app下,页面跳转后wacth持续监听的问题处理
uni-app下,页面跳转后wacth持续监听的问题处理 好久没写博客了,最近碰到了一个uni-app(vue2)开发小程序的问题,个人觉得很典型,所以拿出来给各位做个参考。 需求场景: 全局轮询用户权限。简单…...
Python技术栈 —— 语言基础
Python基础 语法拾遗List与Tuple的区别yield关键字for in enumeratefor in zip 精彩片段测量程序用时 语法拾遗 List与Tuple的区别 ListTuple建立后是否可变可变不可变建立后是否可添加元素可添加不可添加 # list and tuple List [1, 2, 3, 4, 5] Tuple (1, 2, 3, 4, 5) p…...
redis cluster搭建
k8s部署 Redis Insight k8s部署redis集群_mob6454cc6c6291的技术博客_51CTO博客 占用的内存竟然这么小,才200M左右 随便选个节点进去,看能否连接上其他节点 redis-cli -h redis-cluster-v1-0.redis-cluster.project-gulimall.svc.cluster.local 再创建个…...
windows 11 本地运行ER-NeRF及pytorch3D安装
ER-NeRF本地运行只要梳理好依赖版本,运行起来就很顺畅 conda create -n ernerf python3.10 创建本项目虚拟环境conda install pytorch1.12.1 torchvision0.13.1 cudatoolkit11.3 -c pytorch 若windows有多个版本的cuda,需要在环境变量中切换至cuda 11.3&…...
mysql客户端navicat的一些错误合集
关于mysql的客户端的使用的一些问题 问题描述: 在使用navicat prenium客户端的时候,连接数据库出现 Table ‘performance_schema.session_variables’ doesn’t exist 错误 解决方案: 首先找到mysql的bin目录 然后winR 进入到cmd界面 输入…...
【力扣面试经典150题】(链表)K 个一组翻转链表
题目描述 力扣原文链接 给你链表的头节点 head ,每 k 个节点一组进行翻转,请你返回修改后的链表。 k 是一个正整数,它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍,那么请将最后剩余的节点保持原有顺序。 你不能只…...
数据结构刷题
空间复杂度:临时开辟的空间、空间是可以重复利用的 递归为O(n) 时间复杂度:程序执行次数 消失的数字 力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 思路1:利用连续的特点求等差和然后减去所有元素得到的就是消…...
【Android】设置全局标题栏
序言 在做项目的时候,有时候需要一个全局统一的标题栏,保证项目风格的统一,但是如果在每个activity上面都写一遍这个标题栏就很麻烦了,我们经常用的方法就是写个基类Activity,然后当某个Activity需要这个统一的标题栏…...
R语言的入门学习
目录 准备工作导入csv数据集选择前200行作为数据集展示数据集的前/后几N行宏观分析删除缺失值构建直方图导出为图片 R语言常见图像类型例1:散点图例2:散点矩阵图 准备工作 安装教程: R语言和RStudio的下载安装(非常简便舒适&…...
【开源】基于Vue和SpringBoot的民宿预定管理系统
项目编号: S 058 ,文末获取源码。 \color{red}{项目编号:S058,文末获取源码。} 项目编号:S058,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用例设计2.2 功能设计2.2.1 租客角色…...
nacos集群部署
GitHub - nacos-group/nacos-k8s: This project contains a Nacos Docker image meant to facilitate the deployment of Nacos on Kubernetes using StatefulSets. 需要修改两个文件 --- apiVersion: v1 kind: Service metadata:name: nacos-headlessnamespace: project-guli…...
9、传统计算机视觉 —— 边缘检测
本节介绍一种利用传统计算机视觉方法来实现图片边缘检测的方法。 什么是边缘检测? 边缘检测是通过一些算法来识别图像中物体之间,或者物体与背景之间的边界,也就是边缘。 边缘通常是图像中灰度变化显著的地方,标志着不同区域的分界线。 在一张图像中,边缘可以是物体的…...
Linux tc 使用
tc模拟延时丢包等网络故障依赖的内核驱动 /lib/modules/5.15.0-52-generic/kernel/net/sched/sch_netem.ko有些系统并不是默认就安装上该驱动的,如果没有安装该驱动,构造网络故障时会报错。 root:curtis# tc qdisc change dev enp4s0 root netem delay…...
从0开始学习JavaScript--JavaScript 数字与日期
JavaScript中的数字和日期是处理数值计算和时间相关任务的核心。本文将深入研究JavaScript中数字的表示、常见运算,以及日期对象的创建、格式化等操作,并通过丰富的示例代码,可以更全面地了解和应用这些概念。 JavaScript数字基础 JavaScri…...
从关键新闻和最新技术看AI行业发展(2023.11.6-11.19第十期) |【WeThinkIn老实人报】
Rocky Ding 公众号:WeThinkIn 写在前面 【WeThinkIn老实人报】旨在整理&挖掘AI行业的关键新闻和最新技术,同时Rocky会对这些关键信息进行解读,力求让读者们能从容跟随AI科技潮流。也欢迎大家提出宝贵的优化建议,一起交流学习&…...
计算机硬件的基本组成
一、冯诺依曼结构 存储程序: “存储程序”的概念是指将指令以二进制代码的形式事先输入计算机的主存储器,然后按其在存储器中的首地址执行程序的第一条指令,以后就按该程序的规定顺序执行其他指令,直至程序执行结束。 冯诺依曼计…...
【算法-哈希表3】四数相加2 和 赎金信
今天,带来哈希表相关算法的讲解。文中不足错漏之处望请斧正! 理论基础点这里 1. 四数相加2 分析题意 求符合条件的四元组的出现次数,条件: nums1nums2nums3nums4 从四个数组中的每一个数组取一个数 num1, num2, num3, num4&am…...
wpf devexpress自定义编辑器
打开前一个例子 步骤1-自定义FirstName和LastName编辑器字段 如果运行程序,会通知编辑器是空。对于例子,这两个未命名编辑器在第一个LayoutItem(Name)。和最终用户有一个访客左右编辑器查阅到First Name和Last Name字段,分别。如果你看到Go…...
文档向量化工具(一):Apache Tika介绍
Apache Tika是什么?能干什么? Apache Tika是一个内容分析工具包。 该工具包可以从一千多种不同的文件类型(如PPT、XLS和PDF)中检测并提取元数据和文本。 所有这些文件类型都可以通过同一个接口进行解析,这使得Tika在…...
学习c#的第二十一天
目录 C# 泛型(Generic) 泛型类型参数 类型参数的约束 约束多个参数 未绑定的类型参数 类型参数作为约束 notnull 约束 class 约束 default 约束 非托管约束 委托约束 枚举约束 类型参数实现声明的接口 泛型类 泛型方法 泛型和数组 泛型…...
【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道(多模态 OCR → 语义检索 → 答案渲染)、两级检索(倒排 BM25 向量 HNSW)并以大语言模型兜底”的整体框架: 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后,分别用…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...
关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】
大家好,我是java1234_小锋老师,看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】,分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...
Linux部署私有文件管理系统MinIO
最近需要用到一个文件管理服务,但是又不想花钱,所以就想着自己搭建一个,刚好我们用的一个开源框架已经集成了MinIO,所以就选了这个 我这边对文件服务性能要求不是太高,单机版就可以 安装非常简单,几个命令就…...
篇章二 论坛系统——系统设计
目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...
Xcode 16 集成 cocoapods 报错
基于 Xcode 16 新建工程项目,集成 cocoapods 执行 pod init 报错 ### Error RuntimeError - PBXGroup attempted to initialize an object with unknown ISA PBXFileSystemSynchronizedRootGroup from attributes: {"isa">"PBXFileSystemSynchro…...
虚拟机网络不通的问题(这里以win10的问题为主,模式NAT)
当我们网关配置好了,DNS也配置好了,最后在虚拟机里还是无法访问百度的网址。 第一种情况: 我们先考虑一下,网关的IP是否和虚拟机编辑器里的IP一样不,如果不一样需要更改一下,因为我们访问百度需要从物理机…...
十二、【ESP32全栈开发指南: IDF开发环境下cJSON使用】
一、JSON简介 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,具有以下核心特性: 完全独立于编程语言的文本格式易于人阅读和编写易于机器解析和生成基于ECMAScript标准子集 1.1 JSON语法规则 {"name"…...
