Estoy usando Firestore onSnapshot listener en un componente de mi aplicación Nuxt3. Me pregunto cómo separar el oyente cuando el componente está desmontado. ¿Cómo separo con éxito el oyente? Supongo que podría llamar al oyente para cancelar la unsubscribe en el onUnMounted .

Configuré el oyente en un onMounted() y separado de esta manera:

 <script setup> import { useUserStore } from '@/stores/user' import { onSnapshot, collection, query, where, getDocs } from 'firebase/firestore' const userStore = useUserStore() const loading = ref(false) const userPosts = reactive([]) const unsubscribe = ref(null) onMounted(async () => { const { firestore } = useFirebase() const userPostsRef = collection(firestore, 'posts') const q = query(userPostsRef, where('uid', '==', userStore.userProfile.uid)) unsubscribe.value = onSnapshot(q, (snapshot) => { snapshot.docChanges().forEach((change) => { if (change.type === 'added') { console.log('added', change.doc.data()) userPosts.push(change.doc.data()) } if (change.type === 'modified') { console.log('modified', change.doc.data()) userPosts.splice( userPosts.findIndex((post) => post.id === change.doc.id), 1, change.doc.data() ) } if (change.type === 'removed') { console.log('removed', change.doc.data()) userPosts.splice( userPosts.findIndex((post) => post.id === change.doc.id), 1 ) } }) }) loading.value = false }) onUnmounted(() => { unsubscribe.value //<-----is this the correct way to detach it? })

Editar: acabo de confirmar que el método anterior no elimina el oyente porque cada vez que navego fuera de la página, obtengo los registros de la consola de ('agregado', 'modificado', etc.). SO, debo estar haciendo algo mal.