代码之家 › 专栏 › 技术社区 › Patrioticcow

框架7 Vue如何阻止FireBase在不同页面上监听更改?

html-framework-7 vue.js firebase javascript

Patrioticcow · 技术社区 · 6 年前

假设我有 pageA 在这里我监听FireBase文档的更改

export default {
  mounted() {
    this.$f7ready(() => {
      this.userChanges();
    })
  },
  methods: {
    userChanges() {
      Firebase.database().ref('users/1').on('value', (resp) => {
        console.log('use data has changed');
      });
    }
  }
}

然后我去 pageB 使用 this..$f7.views.current.router.navigate('/pageB/')

如果在 帕吉布 我对 /users/1 FireBase路由我看到了,控制台中的消息: use data has changed 即使我在另一页。

有没有任何方法可以避免这种行为,或者以某种方式卸载页面?

我试图在离开之前阻止听众 帕吉亚 使用 Firebase.off() 但这似乎打破了其他一些事情。

1 回复 | 直到 6 年前

mtflud 6 年前

您是否正确地删除了特定数据库引用的侦听器?必须将引用的路径保存在专用变量上才能执行此操作:

let userRef
export default {
    mounted() {
        this.$f7ready(() => {
            this.userChanges();
        })
    },
    methods: {
        userChanges() {
            userRef = Firebase.database().ref('users/1')
            userRef.on('value', (resp) => {
                console.log('use data has changed');
            });
        },
        detachListener() {
            userRef.off('value')
        }
    }
}

这样,您只需分离特定引用的侦听器。在父级上调用它,将删除文档指定的所有侦听器: