如何解决NuxtJS中的Vuefire和异步fetch:页面刷新失败
我正在尝试在Nuxt的访存方法中使用Vuefire。它适用于初始页面加载,但是,如果刷新浏览器,它将失败并显示以下控制台错误:
以下是相关代码:
async fetch() {
await this.$bind(
'comments',this.$fireStore
.collection('comments')
.where('photoId','==',this.photo.id),{
wait: true
}
)
},data() {
return {
comments: []
}
},
任何人都对如何解决此问题有任何提示,因此如果刷新浏览器,它也可以工作?我可能没有正确编写以上代码。谢谢!
解决方法
我不知道您打算如何使用this.$bind
,但是我想您可以通过以下方式完成这项工作:
data() {
return {
comments: []
}
},async fetch() {
this.comments = await this.$fireStore
.collection('comments')
.where('photoId','==',this.photo.id),{
wait: true
}
},fetchOnServer: false
您可以在Nuxt documentation中查看示例。
,你必须在 fetch() 上声明 this.comments
现在nuxt firestore 模块中的firestore API 改为 this.$fire.firestore https://firebase.nuxtjs.org/community/migrate
回答 Sergio:this.$bind 来自 Vuefire
https://vuefire.vuejs.org/api/vuefire.html#bind
async fetch() {
this.comments = await this.$bind(
'comments',this.$fire.firestore
.collection('comments')
.where('photoId',{
wait: true
}
)
},data() {
return {
comments: []
}
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。