Question

我有一个问题，我希望将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路由器

Answer 1

我通过在帮助函数

中返回一个promise修复了问题

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);
      },
    },

在解决Vue firebase时传递prop

1 个答案: