解决 Vue firebase 后传递 prop答案

【问题标题】：Pass down prop when it has resolved Vue firebase解决 Vue firebase 后传递 prop
【发布时间】：2018-08-04 10:16:34
【问题描述】：

我有一个问题，我想将 firebase 用户作为道具从根组件向下传递到我的子组件。通过将用户传递给我的路由器，我成功了这一步。但是，问题是我将新的 Vue 实例包装在 onAuthStateChange 监听器中。

const unsubscribe = auth.onAuthStateChanged(user => {
  new Vue({
    router,
    el: '#app',
    template: '<App :user="user" />',
    components: { App },
    data() {
      return {
        user: {
          email: user.email,
          uid: user.uid,
          capital: findUserById(user.uid),
        },
      };
    },
  });
  //remove this listener so that we aren't trying to make new vue objects
  //every time the auth state changes.
  unsubscribe();
});

findUserById 按预期返回用户 ID。但是它是在创建 Vue 组件之后运行的，这会导致资本未定义。

const findUserById = id => {
  db
    .ref()
    .child('users/')
    .orderByChild('uid')
    .equalTo(id)
    .once('value', function(snap) {
      const obj = snap.val();
      return obj[Object.keys(obj)[0]].capital;
    });
};

有什么解决办法吗？我尝试在已安装的生命周期中更新道具，但仍然没有运气。

我的应用组件只是一个 Vue 路由器

【问题讨论】：

你永远不会从你的findUserById 返回一些东西，这就是它未定义的原因
正如 Ferrybig 所说，您的 return 语句实际上从 function(snap) { 返回，而不是从 findUserById 返回。数据是从 Firebase 异步加载的，无法从 findUserById 返回。如需更详细的解释，请参阅 Doug 的优秀博文：medium.com/google-developers/…
感谢大家的回复。因此，如果我理解正确，我不能在我的辅助函数中返回已解决的承诺？那么我唯一能做的就是返回一个promise，然后在我的组件中解决它？

标签： javascript firebase firebase-realtime-database vue.js vue-router

【解决方案1】：

我通过在我的辅助函数中返回一个承诺来解决问题

export function findUserById(id) {
  return new Promise((resolve, reject) => {
    db
      .ref()
      .child('users/')
      .orderByChild('uid')
      .equalTo(id)
      .on('value', snap => {
        const obj = snap.val();
        resolve(obj[Object.keys(obj)[0]]);
      });
  });
}

而且由于 Vue 可以在您使用计算属性时对更改做出反应，所以我用它来等待辅助函数返回 promise 的结果。然而，这样做并不是那么愉快的经历，所以我使用了一个特别适合这类事情的辅助 Vue 库 - https://github.com/foxbenjaminfox/vue-async-computed 然后我可以做这样的事情：

asyncComputed: {
      async user() {
        return await findUserById(user.uid);
      },
    },

【讨论】：