成都网站设计龙兵科技,oa系统开发公司,营销型网站建设需要备案吗,心理网站 模版uni-app下#xff0c;页面跳转后wacth持续监听的问题处理
好久没写博客了#xff0c;最近碰到了一个uni-app#xff08;vue2#xff09;开发小程序的问题#xff0c;个人觉得很典型#xff0c;所以拿出来给各位做个参考。
需求场景#xff1a;
全局轮询用户权限。简单…uni-app下页面跳转后wacth持续监听的问题处理
好久没写博客了最近碰到了一个uni-appvue2开发小程序的问题个人觉得很典型所以拿出来给各位做个参考。
需求场景
全局轮询用户权限。简单点说就是用户登录后要根据其权限判断是否能进入某个页面或者控制使用某个功能之类的。由于权限可能会发生变化前端就需要事实的进行响应。由于我是在登录后开始轮询用户权限接口并保存在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}}至此问题解决
