Question

我有一个项目，该项目显示了来自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 = [ ];

Answer 1

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

如何保持等待Vue直到从Firebase获取数据？

1 个答案: