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

Nuxt.js在asyncData中获取Firestore数据

1 个答案: