Firebase 功能重新加载 auth currentUser，不会在 vue 组件中刷新

Posted 2023-02-22

【中文标题】Firebase 功能重新加载 auth currentUser，不会在 vue 组件中刷新

【英文标题】：Firebase function reload for auth currentUser, doesn't refresh in vue component

【发布时间】：2020-08-10 04:06:33

【问题描述】：

我正在使用 reload 函数更新配置文件 url，我有一个计算属性，但这不反映更改

计算属性

computed: 
    photoUrl: function() 
      return firebase.auth().currentUser.photoURL;
    ,
  

功能

onFileChanged: async function(e) 
      this.image = e.target.files[0];
      if (this.image) 
        try 
          this.loading = true;
          const url = await saveImage(this.image, this.uploadProgress);
          await auth.currentUser.updateProfile(
            photoURL: url
          );
          await auth.currentUser.reload();
         catch (error) 
          this.setTexto("Ocurrió un error al actualizar tu foto de perfil.");
          this.setColor("error");
          this.setVisible(true);
          console.error(error);
         finally 
          this.progreso = 0;
          this.loading = false;
        
      
    

我承诺使用 Firebase 云存储上传文件。

【参考方案1】：

另一种方法是在 data 对象中添加一个简单属性并在您的函数中对其进行更新，如下所示：

data: 
  //....
  photoUrl: null,
  //....


//...
onFileChanged: async function(e) 
      this.image = e.target.files[0];
      if (this.image) 
        try 
          this.loading = true;
          const url = await saveImage(this.image, this.uploadProgress);
          this.photoUrl = url;  // <-------
          await auth.currentUser.updateProfile(
            photoURL: url
          );
          await auth.currentUser.reload();
         catch (error) 
          //...
         finally 
          //...
        
      
    

【讨论】：

这个解决方案听起来不错，但是如果我在另一个组件中使用这些数据，我会使用 vue 的 store 吗？

是的，您可以使用 Vuex 商店。然后，您将提交一个突变以更新 Store 状态中的 photoUrl 属性（而不是执行 this.photoUrl = url;）。