Vuefire и async fetch() в NuxtJS: сбой при обновлении страницы

#nuxt.js #vuefire

Вопрос:

Я пытаюсь использовать Vuefire в методе выборки Nuxt. Это работает при начальной загрузке страницы, однако, если вы обновите браузер, произойдет сбой со следующей ошибкой консоли:

Вот соответствующий код:

   async fetch() {
    await this.$bind(
      'comments',
      this.$fireStore
        .collection('comments')
        .where('photoId', '==', this.photo.id),
      {
        wait: true
      }
    )
  },
data() {
    return {
      comments: []
    }
  },

У кого-нибудь есть какие-либо советы о том, как я могу это исправить, чтобы это также работало, если вы обновите браузер? Вероятно, я неправильно пишу приведенный выше код. Спасибо!

1. Что this.$bind здесь делает? async fetch() будет выполняться на стороне сервера или клиента в зависимости от ситуации, я предполагаю, что этот код не работает на стороне сервера.

2. что, если вы переместите `async fetch` в режим mounted?

3. тогда я потеряю весь смысл рендеринга на стороне сервера для SEO.

Ответ №1:

Вы должны объявить это.комментарии к fetch()

Теперь API firestore в модуле nuxt firestore изменен на this.$fire.firestorehttps://firebase.nuxtjs.org/community/migrate

Отвечая Серджио: 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', '==', this.photo.id),
      {
        wait: true
      }
    )
  },
data() {
    return {
      comments: []
    }
  },

Ответ №2:

Я не знаю, что вы пытаетесь сделать с this.$bind , но я думаю, вы можете заставить это работать таким образом:

 data() {
  return {
    comments: []
  }
},

async fetch() {
  this.comments = await this.$fireStore
    .collection('comments')
    .where('photoId', '==', this.photo.id),
  {
    wait: true
  }
},

fetchOnServer: false

Вы можете проверить пример в документации Nuxt.