当前位置：首页 > article >正文

uni-app下，页面跳转后wacth持续监听的问题处理

article 2024/9/25 15:50:46

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('没有观察者可移除！')
  }
}

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