firebase - 如何取消订阅（）vue.js组件中的firebase集合

Question

在使用 firebase 动态检索数据的 vuejs 组件中，我想在退出组件时取消订阅。

在firebase文档中指出必须使用该unsubscribe()功能；停止收听收藏。

不幸的是，这个函数不能直接使用，因为它被声明为未定义。

这是组件代码：

<script>
  import db from "../../firebase/init";

  let subscribe;
    
  export default {
  // ...
  
  beforeDestroy() {
    // Don't work form me !!!
    unsubscribe();
  },
  
  methods: {
     async getMyCollection() {
      try {
        subscribe = await db.collection("myCollection");
        subscribe.onSnapshot(snapshot => {
          snapshot.docChanges().forEach(change => {
            // Do something
            }
          });
        });
      } catch (error) {
        console.log(error);
      }

    }
  }
</script>

谢谢您的帮助

Answer 1

这是因为您还没有定义unsubscribe任何地方。请检查下面的代码。

<script>


import db from "../../firebase/init";

  let unsubscribe;
    
  export default {
  // ...
  
  beforeDestroy() {
    unsubscribe();
  },
  
  methods: {
     async getMyCollection() {
      try {
        unsubscribe = await db.collection("myCollection")
        .onSnapshot(snapshot => {
          snapshot.docChanges().forEach(change => {
            // Do something
            }
          });
        });
      } catch (error) {
        console.log(error);
      }

    }
  }
</script>