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

至此,问题解决

相关推荐
耶啵奶膘8 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
我开心就好o15 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index15 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
初遇你时动了情1 天前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑0071 天前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字1 天前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔1 天前
uniapp rpx兼容平板
uni-app
荔枝吖1 天前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗1 天前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64
halo14161 天前
uni-app 界面TabBar中间大图标设置的两种方法
开发语言·javascript·uni-app