解决 Vue firebase 后传递 prop

Posted 2023-02-22

【中文标题】解决 Vue firebase 后传递 prop

【英文标题】：Pass down prop when it has resolved Vue firebase

【发布时间】：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，然后在我的组件中解决它？

【参考方案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);
      ,
    ,