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

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

Nuxtjs 在 asyncData 中获取 firestore 数据

Nuxtjs getting firestore data within asyncData

firebase

server-side-rendering

vuejs2

nuxt.js

google-cloud-firestore