javascript - 从 Firestore 嵌套/子集合中分离监听器时出现问题

Question

我的场景是一个在 Firestore 中具有以下设置的聊天应用

channels (collection)
  id (doc)
    messages (collection)
    {channelObj}
  id (doc)
    messages (collection)
    {channelObj}
etc

虽然我在分离该监听器时遇到问题，但我已成功将监听器附加到子集合消息，因此当我切换聊天 channel 和切换到聊天 channel 时，随着监听器不断堆叠，我会得到重复的条目。

这是我的 vue 文件中的脚本 block

<script>
import firestore from 'firebase/firestore'
import { mapGetters } from 'vuex'
import SingleMessage from './SingleMessage'
import MessageForm from './MessageForm'

export default {
  name: 'messages',
  components: {
    SingleMessage,
    MessageForm,
  },
  data() {
    return {
      channelsRef: firebase.firestore().collection('channels'),
      messages: [],
      channel: '',
      unsubscribe: null
    }
  },
  computed: {
    ...mapGetters(['currentChannel']),
  },
  watch: {
    currentChannel: async function(newValue, oldValue) {
      this.messages = []
      oldValue && 
        await this.detachListeners(newValue, oldValue)
      await this.unsubscribe
      await this.timeout(2000)
      await this.addListeners(newValue)
    },
  },
  methods: {
    addListeners(newValue) {
      this.channelsRef
        .doc(newValue.id)
        .collection('messages')
        .onSnapshot(snapshot => {
          snapshot.docChanges().forEach(change => {
            if (change.type == 'added') {
              let doc = change.doc
              this.messages.push({
                id: doc.id,
                content: doc.data().content,
                timestamp: doc.data().timestamp,
                user: doc.data().user,
              })
            }
          })
        })
      //
      console.log('[addListeners] channel:', newValue.id)
    },
    detachListeners(newValue, oldValue) {
      this.unsubscribe = 
      this.channelsRef
        .doc(oldValue.id)
        .collection('messages')
        .onSnapshot(() => {})
      //
      console.log('[detachListeners] channel:', oldValue.id)
    },
    timeout(ms) {
      console.log('waiting...')
      return new Promise(resolve => setTimeout(resolve, ms));
    },
  },
}
</script>

如您所见，我正在使用 Vue 观察器来监视 channel 何时发生变化。澄清一下，console.log 使用正确的文档 ID 触发，因此它应该正确定位。我尝试使用异步代码等待分离，但这不起作用。

文档建议将分离代码保存到一个变量并调用它，我现在正在我的 watch block 中这样做。当控制台记录它说这个时

ƒ () {
            asyncObserver.mute();
            firestoreClient.unlisten(internalListener);
        }

所以我在这里有点迷路，似乎我正在使用正确的取消监听方法来定位正确的集合......我可以采取任何其他步骤来调试吗？

Answer 1

您必须将 onSnapshot() 返回的函数存储在 data 中方法并调用此函数以分离监听器。

在您现有的代码中，您确实在 data 中声明了一个 unsubscribe 对象，但您没有正确地将 onSnapshot() 返回的函数分配给它方法(你应该在 addListeners() 方法中这样做)并且你没有正确调用它(你做 this.unsubscribe 而不是 this.unsubscribe() )。

我没有复制你的完整案例，因为它暗示了一个 Vuex 商店和一些额外的组件，但你会在下面找到一个类似的代码来演示它是如何工作的(我的设置与你的有点不同 - 我使用 require("../firebaseConfig.js"); 和 fb.db.collection(channel) - 但你会很容易地理解哲学!:

<template>
  <div>
    <input v-model="currentChannel" placeholder="Enter Current Channel">
    <p>CurrentChannel is: {{ currentChannel }}</p>
    <div class="messagesList">
      <li v-for="m in messages">{{ m.name }}</li>
    </div>
  </div>
</template>

<script>
const fb = require("../firebaseConfig.js");
export default {
  data() {
    return {
      messages: [],
      currentChannel: null,
      listener: null    //We store the "listener function" in the object returned by the data function
    };
  },
  watch: {
    currentChannel: function(newValue, oldValue) {
      this.messages = [];
      if (this.listener) {
        this.listener();  //Here we call the "listener function" -> it detaches the current listener
        this.addListeners(newValue);
      } else {
        this.addListeners(newValue);
      }
    }
  },
  methods: {
    addListeners(channel) {
      this.listener = fb.db.collection(channel).onSnapshot(snapshot => {
        snapshot.docChanges().forEach(change => {
          if (change.type == "added") {
            let doc = change.doc;
            this.messages.push({
              id: doc.id,
              name: doc.data().name
            });
          }
        });
      });
    }
  }
};
</script>

<style>
.messagesList {
  margin-top: 28px;
}
</style>

---

因此，如果我们尝试将此方法应用于您的代码，修改后的代码将如下所示:

<script>
import firestore from 'firebase/firestore'
import { mapGetters } from 'vuex'
import SingleMessage from './SingleMessage'
import MessageForm from './MessageForm'

export default {
  name: 'messages',
  components: {
    SingleMessage,
    MessageForm,
  },
  data() {
    return {
      channelsRef: firebase.firestore().collection('channels'),
      messages: [],
      channel: '',
      unsubscribe: null
    }
  },
  computed: {
    ...mapGetters(['currentChannel']),
  },
  watch: {
    currentChannel: function(newValue, oldValue) {
          this.messages = [];
          if (this.unsubscribe) {
            this.unsubscribe(); 
            this.addListeners(newValue);
          } else {
            this.addListeners(newValue);
          }
    }
  },
  methods: {
    addListeners(newValue) {
      this.unsubscribe = this.channelsRef
        .doc(newValue.id)
        .collection('messages')
        .onSnapshot(snapshot => {
          snapshot.docChanges().forEach(change => {
            if (change.type == 'added') {
              let doc = change.doc
              this.messages.push({
                id: doc.id,
                content: doc.data().content,
                timestamp: doc.data().timestamp,
                user: doc.data().user,
              });
            }
          });
        });
      console.log('[addListeners] channel:', newValue.id)
    }
  }
}
</script>