Nuxtjs получает данные из хранилища в asyncData - PullRequest
Новая
       39

Nuxtjs получает данные из хранилища в asyncData

0 голосов
/ 08 сентября 2018

Я пытаюсь преобразовать мое приложение 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: Да, этот код находится внутри папки моих страниц, а не компонента, я знаю, что это не разрешено.

1 Ответ

0 голосов
/ 15 сентября 2018

При использовании 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
}
  },
...