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
    }
  }

至此,问题解决

相关推荐
吴传逞2 天前
记一次uniapp微信小程序开发scss变量失效的问题
微信小程序·uni-app·scss
2501_915921433 天前
小团队如何高效完成 uni-app iOS 上架,从分工到工具组合的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_916008893 天前
uni-app iOS 文件管理与 itools 配合实战,多工具协作的完整流程
android·ios·小程序·https·uni-app·iphone·webview
!win !3 天前
uni-app项目Tabbar实现切换icon动效
小程序·uni-app
xw53 天前
uni-app项目Tabbar实现切换icon动效
前端·uni-app
2501_916007473 天前
uni-app iOS 文件调试常见问题与解决方案:结合 itools、克魔、iMazing 的实战经验
android·ios·小程序·https·uni-app·iphone·webview
豆豆(设计前端)3 天前
使用 Uni-app 打包 外链地址APK 及 iOS 注意事项
ios·uni-app
jingling5553 天前
uniapp | 解决组件样式不生效问题
前端·css·uni-app·html·学习方法
^Rocky3 天前
微信小程序(uniapp)实现连接蓝牙
微信小程序·uni-app·蓝牙连接
2501_915918413 天前
uni-app 项目 iOS 上架踩坑经验总结 从证书到审核的避坑指南
android·ios·小程序·https·uni-app·iphone·webview