Question

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

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

尽管在拆离该侦听器时遇到麻烦，但我已经成功地将侦听器附加到了子集合消息上，因此，当我从一个聊天频道切换到另一个聊天频道时，随着侦听器不断堆积，我会得到重复的条目。

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

<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监视程序监视频道的更改时间。需要说明的是，console.log使用正确的文档ID触发，因此应该正确地定位。我尝试使用异步代码来等待分离，但这不起作用。

文档建议将分离代码保存到变量中并调用该变量，我现在在我的监视块中执行此操作。在控制台日志记录中说

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

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

Answer 1

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

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

我没有重述您的完整情况，因为它暗示了Vuex商店和一些其他组件，但是您会在下面找到类似的代码来演示其工作原理（我的设置与您的设置有些不同-我使用{{1 }}和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>

将监听器与Firestore嵌套/子集合分离的问题

1 个答案: