Проблема отсоединения слушателя от вложенного / вложенного набора Firestore

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 ведут огонь с правильными идентификаторами документов, поэтому он должен быть нацелен правильно. Я пытался использовать асинхронный код для ожидания отсоединения, но это не работает.

Документы, советующие сохранить код отсоединения в переменную и вызвать его, что я сейчас и делаю в своем блоке часов. Когда консоль регистрируется, что это говорит

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

Так что я немного растерялся, кажется, я нацеливаюсь на правильную коллекцию с правильным методом для удаления из списка ... любые другие шаги, которые я могу предпринять для отладки?

Answer 1

Вы должны сохранить в data функцию, возвращаемую методом onSnapshot(), и вызвать эту функцию, чтобы отсоединить слушателя.

В вашем существующем коде вы действительно объявляете объект unsubscribe в data, но неправильно назначаете ему функцию, возвращаемую методом 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>