Nuxtjs 在 asyncData 中获取 Firestore 数据答案

【问题标题】：Nuxtjs getting firestore data within asyncDataNuxtjs 在 asyncData 中获取 Firestore 数据
【发布时间】：2019-02-13 15:04:27
【问题描述】：

我正在尝试将我的 VueJS 应用程序转换为 NuxtJS 以使用 SSR。我一直在尝试使用 asyncData 加载数据。当我将查询添加到'mounted() {}' 函数时，它工作正常，但我无法让它与asyncData(){} 一起使用，因此我可以使用 SSR。

有没有人知道如何解决这个问题。

我的代码：

 <ul>
   <li v-for='province in provinces' v-bind:key="province.id"> {{province.name_nl}}</li>
      </ul>

  asyncData () {
    return { msg: 'Welcome to my  new app' }
    const moment = require("moment");
    var date = moment(new Date()).format("YYYY-MM-DD");
    let housesArray = []
    let provincesArray = []

    return firebase.firestore()
      .collection('provinces')
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
        provincesArray.push(doc.data());
        });
        return {provinces: provincesArray}
      });
  },

或者我应该以其他方式执行此操作吗？请记住，它确实必须与 SSR 一起使用。

PS：是的，这段代码在我的页面文件夹中，而不是组件中，我知道这是不允许的。

【问题讨论】：

那么什么错误？它是如何不工作的
我没有收到任何错误，但我也无法 console.log 或调试代码。所以它什么都没有显示。所以我不知道从哪里开始。
您在 asyncData 顶部有一个返回，因此没有执行过代码
谢谢，我没有意识到返回后的代码没有被执行。还在努力学习。但是我仍然无法返回 firestore 数据，因为我需要对 firestore 执行 2 次调用，但是如果我同时返回 return {provinces: ProvinceArray,houses:housesArray} 则 firestore 函数并不总是在返回之前执行，任何关于我必须做什么才能等待回复的想法，或者任何人都知道的一些文档可以为我指明正确的方向？
@pmanning 是的，当然，抱歉。我自己应该想到的。 :) 无论如何，我现在添加了我的解决方案。如果不清楚，请告诉我。

标签： firebase vuejs2 google-cloud-firestore nuxt.js server-side-rendering

【解决方案1】：

使用asyncDate() 时，您可以添加async 和await 关键字来等待响应，然后再返回它们。

我是如何解决的：

 async asyncData () {
    const moment = require("moment");
    var date = moment(new Date()).format("YYYY-MM-DD");
    let housesArray = []
    let provincesArray = []

await firebase.firestore()
  .collection('provinces')
  .orderBy('name_nl')
  .get()
  .then(querySnapshot => {
    querySnapshot.forEach(doc => {
      provincesArray.push(doc.data());
    });
  });

await firebase.firestore()
  .collection("houses")
  .where("valid_until", ">", date)
  .get()
  .then(querySnapshot => {
    querySnapshot.forEach(doc => {
      housesArray.push(doc.data());
    });
  });

return {
  provinces: provincesArray,
  houses: housesArray
}
  },

【讨论】：

如何在.vue中导入firebase/firestore？
看一下这里的教程：medium.com/@anas.mammeri/… 这是很久以前的事了，但我认为一切仍然相关。