[英]NuxtJS and Firebase Web SDK Beta v9: How to add realtime listener to firestore?
I am using the new Firebase Web SDK v9 (beta 8) with NuxtJS2.我正在使用新的 Firebase Web SDK v9(测试版 8)和 NuxtJS2。 I have a child component that allows a user to edit his post data.
我有一个子组件,允许用户编辑他的帖子数据。 This updates a document in Firestsore with the new post changes.
这会使用新的帖子更改更新 Firestore 中的文档。 However, my question is...how do I get have my parent component get realtime updates of this new data?
但是,我的问题是......我如何让我的父组件获得这个新数据的实时更新?
Let me explain:让我解释:
I have the following example components structure in the app:我在应用程序中有以下示例组件结构:
<PostCardDetail>
<PostEdit />
</PostCardDetail>
PostCardDetail.vue
script section where I am doing the data fetch:我正在执行数据获取的
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>
The PostEdit.vue
script section where I am doing the data editing:我正在执行数据编辑的
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!')
}
I am able to successfully edit the data, but to view the latest changes, I need to manually refresh the browser.我能够成功编辑数据,但是要查看最新的变化,我需要手动刷新浏览器。 How can I get automatic real time update with firestore after post is edited by user?
用户编辑帖子后,如何使用 firestore 获得自动实时更新? I assume this listener will be in the mounted() hook property of
PostCardDetail
?我假设此侦听器将位于
PostCardDetail
的 mounted() 挂钩属性中?
My attempt:我的尝试:
mounted() {
// eslint-disable-next-line no-unused-vars
const unsub = onSnapshot(
doc(db, 'posts', this.$route.params.postId),
(snapshot) => {
this.post = snapshot.data()
}
)
}
This SEEMS to work OK, but feels a bit clunky.这看起来工作正常,但感觉有点笨拙。 Is this the recommended way to approach this with NuxtJS?
这是用 NuxtJS 解决这个问题的推荐方法吗?
The query looks perfectly fine and similar to as mentioned in the documentation .该查询看起来非常好,与文档中提到的类似。
I assume this listener will be in the mounted() hook property of PostCardDetail
我假设此侦听器将位于 PostCardDetail 的 mounted() 挂钩属性中
Ideally you might want to set the listener once the component is created and I've mostly seen listeners being set in created()
理想情况下,您可能希望在创建组件后设置侦听器,我经常看到在
created()
中设置侦听器
created() {
const unsub = onSnapshot(
doc(db, 'posts', this.$route.params.postId),
(snapshot) => {
this.post = snapshot.data()
}
)
}
To use the unsub
somewhere else, you can set it in the data property or pass it to other components depending on your use case.要在其他地方使用
unsub
,您可以根据您的用例在数据属性中设置它或将其传递给其他组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.