Framework 7 Vue 如何阻止 Firebase 在不同页面上监听更改？

Question

假设我有 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');
      });
    }
  }
}

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

转到 pageB

如果在 pageB 上，我对 /users/1 firebase 路由进行了更改，我在控制台中看到此消息：use data has changed，即使我在不同的页面上也是如此。

有什么方法可以避免这种行为，也许可以通过某种方式卸载页面？

我试图在使用 Firebase.off() 离开 pageA 之前停止监听器，但这似乎破坏了其他一些东西。

Answer 1

您是否正确删除了该特定数据库引用的侦听器？为此，您必须将引用路径保存在专用变量中：

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

这样你就可以只分离特定引用的侦听器。在父级上调用它，将按照文档指定的那样删除所有侦听器：

You can remove a single listener by passing it as a parameter to off(). Calling off() on the location with no arguments removes all listeners at that location.

更多关于该主题的信息：https://firebase.google.com/docs/database/web/read-and-write#detach_listeners

Framework 7 Vue 如何阻止 Firebase 在不同页面上监听更改？

Framework 7 Vue how to stop Firebase from listening to changes when on different pages?

javascript

firebase

vue.js

html-framework-7