Javascript 在Firestore存储之后，无法分配给VueJS中的数据变量

大家好，我遇到了一个问题，我的数据被更改回原来的作业。例如，我有以下数据：

 data() {
    return {
        uid: "",
        pic: "hello",
    }
},

使用下面的函数，警报将返回“hello”

**getprofilepic函数

getprofilepic() {
    fb.storage().ref('users/' + this.uid + '/profile.jpg').getDownloadURL().then(imgurl => {
        this.pic = imgurl;
    })
    alert(this.pic);           // returns "hello"
},

如果我将警报放入fb.storage…，它将返回如下所示的正确路径：

getprofilepic() {
    alert("getting profile pic")
    fb.storage().ref('users/' + this.uid + '/profile.jpg').getDownloadURL().then(imgurl => {
        this.pic = imgurl;
        alert(this.pic);     // returns correct path;
    })
    
},

是否有理由再次覆盖数据？提前感谢您的帮助！：）我想用v-bind:src从firebase存储中获取照片的路径，但“pic”返回“hello”。您可以在下面找到我的html代码：

<b-avatar :src = "pic" id = "profilepic" class="mr-5" size="8em"></b-avatar>

---

如果我正确理解您的问题，原因是该方法是异步的。只有当方法返回的结果得到满足时，调用此函数的结果才可用。这就是我们使用该方法的原因：传递给

then（）

的处理函数将返回URL的值

上一段中重要的是使用will：该方法是异步的，因此不会立即返回结果。但是，JavaScript代码继续执行：这就是为什么行

警报（this.pic）以初始值
hello
执行

请尝试以下代码：

getprofilepic() {
    fb.storage().ref('users/' + this.uid + '/profile.jpg').getDownloadURL().then(imgurl => {
        alert(imgurl);   // <----- See the change here
        this.pic = imgurl;
    })
    alert(this.pic);           // returns "hello"
},

getprofilepic（）{
fb.storage（）.ref（'users/'+this.uid+'/profile.jpg'）。getDownloadURL（）。然后（imgurl=>{
alert（imgurl）；//每次特定页面再次呈现时，数据属性中的所有分配都将设置为其初始分配。您好@YashMaheshwari，谢谢您的评论。您的意思是调用fb.storage（）吗.ref…将刷新页面，还有，有什么方法可以解决这个问题吗？ThanksHi@RenaudTarnec，感谢您的详细解释。我现在了解它的工作原理，但我的实际问题是我想v-bind:src=“profilepic”，并且数据profilepic显示“hello”不是实际路径。是否有办法解决此问题？要么从空值或“加载…”值开始，要么在其中一个中执行此调用，例如，
创建的
one，这样只有在返回正确的值时才会显示组件。我在created（）中添加了getprofilepic（）函数并使用v-bind:src=“pic”调用变量pic，如上所示（已编辑）。变量pic仍然显示错误的数据：改为显示“hello”。
getprofilepic() {
    fb.storage().ref('users/' + this.uid + '/profile.jpg').getDownloadURL().then(imgurl => {
        alert(imgurl);   // <----- See the change here
        this.pic = imgurl;
    })
    alert(this.pic);           // returns "hello"
},