如何一直等待 Vue 直到从 firebase 获取数据？答案

【问题标题】：How to keep waiting Vue until getting data from firebase?如何一直等待 Vue 直到从 firebase 获取数据？
【发布时间】：2019-08-31 18:46:02
【问题描述】：

我有一个项目显示来自 firebase 实时数据库的帖子。我使用 Vue、Vue-Router 和 Firebase 身份验证。首先，当用户打开网站时，用户会看到一个登录屏幕。在该屏幕页面中加载我的数据库中的帖子。然后当用户登录时，他/她会路由到我的 Home.vue 页面。在这里的帖子显示没有问题。但是当用户刷新页面时，Home.vue 中的元素加载速度比我的 Firebase 数据快。我想修复它。

这是我从另一个 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 = [ ];

【问题讨论】：

标签： firebase vue.js

【解决方案1】：

您必须在 vue.js 中寻找生命周期钩子，并使用在页面（重新）加载之前/时触发的一个钩子。在其中您使用 firebase 函数设置一个 Promise，在解决时触发 getData()并通过选择的生命周期挂钩。

【讨论】：