firebase - Nuxtjs 在 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:是的，这段代码在我的 pages 文件夹中，而不是在组件中，我知道这是不允许的。

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