javascript - Firebase 和 Vue Js 生命周期钩子(Hook)

Question

我正在尝试从特定用户加载数据并将该数据推送到特定输入字段。 Firebase 中的路径位于:

var query = db.ref('Clients/'+ clientName +'/form/');

我在 mounted() 生命周期钩子(Hook)中 fecth 数据如下:

mounted(){

// Grab current user logged in from Firebase
var user = firebaseApp.auth().currentUser;

if ( user ){
 // Grab displayName to use in path to retrieve that client's data
 var clientName = firebaseApp.auth().currentUser.displayName;

 // The path to that specific's client data
 var query = db.ref('Clients/'+ clientName+'/form/');

   query.once('value')
     .then((snapshot) => {

        // Get the client's location from Firebase and assign to  clientLocation data in the DOM
        this.clientLocation = snapshot.child('clientLocation').val();

     });
   }

}

当我进行更改并保存我的代码而不重新加载时，数据会被正确推送。但是在重新加载时出现以下错误:

 Error in mounted hook: "TypeError: Cannot read property 'displayName' of null"

我尝试了所有的生命周期钩子(Hook):

1. 创建前
2. 创建
3. 挂载前
4. 安装
5. 更新前
6. 已更新
7. 销毁前
8. 销毁

但数据不显示。由于似乎 firebaseApp 尚未“加载”，因此我无法获取“displayName”属性值，因此无法填充数据路径。

我应该如何/何时加载这段有效但似乎运行得太早的代码？

Answer 1

用户信息可能需要异步加载/刷新。因此，始终使用 an auth state listener以确保您的代码在用户可用时运行。从链接文档修改:

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // Grab displayName to use in path to retrieve that client's data
    var clientName = firebaseApp.auth().currentUser.displayName;

    // The path to that specific's client data
    var query = db.ref('Clients/'+ clientName+'/form/');

    var that = this;
    query.once('value').then((snapshot) => {
       // Get the client's location from Firebase and assign to  clientLocation data in the DOM
       that.clientLocation = snapshot.child('clientLocation').val();
    });
  }
});

您可以将它放在 mounted() 中，但它也应该适用于任何其他生命周期方法。