Estoy usando el nuevo Firebase Web SDK v9 (beta 8) con NuxtJS2. Tengo un componente secundario que permite a un usuario editar los datos de su publicación. Esto actualiza un documento en Firestsore con los nuevos cambios de publicación. Sin embargo, mi pregunta es... ¿cómo hago para que mi componente principal obtenga actualizaciones en tiempo real de estos nuevos datos?

Dejame explicar:

Tengo la siguiente estructura de componentes de ejemplo en la aplicación:

 <PostCardDetail> <PostEdit /> </PostCardDetail>

Sección del script PostCardDetail.vue donde estoy haciendo la obtención de datos:

 import { doc, getDoc } from 'firebase/firestore' import { mapGetters } from 'vuex' import { db } from '~/plugins/firebase' export default { name: 'PostCardDetail', data() { return { post: {} } }, async fetch() { const docRef = doc(db, 'posts', this.$route.params.postId) const docSnap = await getDoc(docRef) this.post = docSnap.data() }, mounted () { // I believe I will need to mount the realtime listener here? }, } </script>

La sección del script PostEdit.vue donde estoy editando los datos:

 editPost() { const postRef = doc(db, 'posts', this.post.id) await updateDoc(postRef, { ...editedPost, updatedAt: serverTimestamp() }) console.log('updated!') this.$store.dispatch('edit', false) alert('Post successfully updated!') }

Puedo editar correctamente los datos, pero para ver los últimos cambios, necesito actualizar manualmente el navegador. ¿Cómo puedo obtener una actualización automática en tiempo real con firestore después de que el usuario edite la publicación? ¿Supongo que este oyente estará en la propiedad de gancho montada () de PostCardDetail ?

Mi intento:

 mounted() { // eslint-disable-next-line no-unused-vars const unsub = onSnapshot( doc(db, 'posts', this.$route.params.postId), (snapshot) => { this.post = snapshot.data() } ) }

Esto PARECE funcionar bien, pero se siente un poco torpe. ¿Es esta la forma recomendada de abordar esto con NuxtJS?