NuxtJS和v9:如何将实时侦听器添加到防火墙中？

Question

我正在使用新的Firebase Web v9 (beta 8)和NuxtJS2。我有一个子组件，允许用户编辑其post数据。这将使用新的post更改来更新Firestsore中的文档。但是，我的问题is...how是否让我的父组件获得这个新数据的实时更新？

让我解释一下：

我在应用程序中有以下示例组件结构：

<PostCardDetail>
    <PostEdit />
</PostCardDetail>

PostCardDetail.vue脚本部分，我在其中进行数据提取：

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>

我正在进行数据编辑的PostEdit.vue脚本部分：

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!')
}

我能够成功地编辑数据，但是要查看最新的更改，我需要手动刷新浏览器。如何在用户编辑post后，用防火墙实现自动实时更新？我假设这个侦听器将在PostCardDetail的挂载()钩子属性中

我的尝试：

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

这似乎没问题，但感觉有点笨重。这是用NuxtJS来处理这个问题的推荐方法吗？

Answer 1

查询看起来非常好，类似于文档中提到的那样。

我假设这个侦听器将在PostCardDetail的挂载()钩子属性中

理想情况下，您可能希望在组件创建之后设置侦听器，并且我已经看到大多数侦听器正在created()中设置。

created() {
  const unsub = onSnapshot(
      doc(db, 'posts', this.$route.params.postId),
      (snapshot) => {
        this.post = snapshot.data()
      }
    )
}

要在其他地方使用unsub，可以在data属性中设置它，或者根据用例将它传递给其他组件。