Как продолжать ждать Vue до получения данных из Firebase?

Question

У меня есть проект, который показывает сообщения из базы данных Firebase в реальном времени.Я использую Vue, Vue-Router и Firebase Authentication.Во-первых, когда пользователь открывает сайт, он видит экран входа в систему.На этом экране страница загружает сообщения из моей базы данных.Затем, когда пользователь входит в систему, он / она направляется на мою страницу Home.vue.Здесь сообщения показывают, что нет проблем.Но когда пользователь обновляет страницу, элементы, находящиеся в Home.vue, загружаются быстрее, чем мои данные из базы данных.Я хочу это исправить.

Это моя функция, которая загружается поздно из другого файла JavaScript:

function getData(data) {
  var posts = data.val();
  var keys = Object.keys(posts);

  for(var i = 0; i < keys.length; i++) {
    var id = keys[i];
    var user = posts[id].user;
    var text = posts[id].text;
    var date = posts[id].date;
    userPosts.push({
      id: id,
      user: user,
      text: text,
      date: date
    });
  }
  userPosts.reverse();
}

export var userPosts = [ ];

Answer 1

Вы должны искать хуки жизненного цикла в vue.js и использовать один хук, который срабатывает до / когда страница загружается (пере). В ней вы устанавливаете Promise с вашей функцией firebase, которая вызывает getData () при разрешениии перейдите к выбранному крюку жизненного цикла.