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: []
    }
  },

nuxt.js vuefire