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生命周期中移除监听。

代码:

javascript 复制代码
// 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('没有观察者可移除!')
  }
}
javascript 复制代码
//page
  onShow() {
    // 此处传递的参数为函数名。所以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].children
      this.menu = auth
    }
  }

至此,问题解决

相关推荐
阿伟来咯~5 小时前
一些 uniapp相关bug
uni-app·bug
瑶琴AI前端8 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
mosen8689 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
尚梦17 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
尚学教辅学习资料1 天前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie2341 天前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
qq22951165021 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
qq22951165022 天前
微信小程序uniapp基于Android的流浪动物管理系统 70c3u
微信小程序·uni-app
qq22951165022 天前
微信小程序 uniapp+vue老年人身体监测系统 acyux
vue.js·微信小程序·uni-app
摇头的金丝猴2 天前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts