Nuxtjs 在 asyncData 中获取 Firestore 数据

Posted 2023-02-22

【中文标题】Nuxtjs 在 asyncData 中获取 Firestore 数据

【英文标题】：Nuxtjs getting firestore data within asyncData

【发布时间】：2019-02-13 15:04:27

【问题描述】：

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

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

我的代码：

 <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
      );
  ,

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

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

【问题讨论】：

那么什么错误？它是如何不工作的

我没有收到任何错误，但我也无法 console.log 或调试代码。所以它什么都没有显示。所以我不知道从哪里开始。

您在 asyncData 顶部有一个返回，因此没有执行过代码

谢谢，我没有意识到返回后的代码没有被执行。还在努力学习。但是我仍然无法返回 firestore 数据，因为我需要对 firestore 执行 2 次调用，但是如果我同时返回 return provinces: ProvinceArray,houses:housesArray 则 firestore 函数并不总是在返回之前执行，任何关于我必须做什么才能等待回复的想法，或者任何人都知道的一些文档可以为我指明正确的方向？

@pmanning 是的，当然，抱歉。我自己应该想到的。 :) 无论如何，我现在添加了我的解决方案。如果不清楚，请告诉我。

【参考方案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/… 这是很久以前的事了，但我认为一切仍然相关。