Nuxt.js在asyncData中获取Firestore数据

Question

我正在尝试将我的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：是的，此代码位于我的页面文件夹中，而不是组件中，我知道这是不允许的。

Answer 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
}
  },