Nuxtjs가 비동기 데이터 내에서 Firestore 데이터를 가져옵니다.

Nuxtjs가 비동기 데이터 내에서 Firestore 데이터를 가져옵니다.

SSR와 연동하기 위해 VueJs 앱을 NuxtJs로 변환하려고 합니다.비동기 데이터로 데이터를 로드하려고 하는데 막히네요.에 쿼리를 추가할 때'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: 네, 이 코드는 컴포넌트가 아닌 마이페이지 폴더에 있습니다.그것은 허용되지 않습니다.

사용시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
}
  },

언급URL : https://stackoverflow.com/questions/52236443/nuxtjs-getting-firestore-data-within-asyncdata