Firestore存储后无法在VueJS中分配数据var [英] Unable to assign to data var in VueJS after Firestore storage

问题描述

您好，我遇到的一个问题是我的数据被更改回原始分配.例如，我有以下数据:

  data(){返回 {uid:"，图片:"hello"，}}， 

使用以下功能，警报将返回"hello"

  created(){this.uid = fb.auth().currentUser.uid;this.getprofilepic();}， 

** getprofilepic函数

  getprofilepic(){fb.storage().ref('users/'+ this.uid +'/profile.jpg').getDownloadURL().then(imgurl => {this.pic = imgurl;})警报(this.pic);//返回"hello"；}， 

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

  getprofilepic(){警报(获取个人资料照片")fb.storage().ref('users/'+ this.uid +'/profile.jpg').getDownloadURL().then(imgurl => {this.pic = imgurl;警报(this.pic);//返回正确的路径；})}， 

是否有理由再次覆盖数据?预先感谢您的任何帮助！:)我想通过v-bind:src从Firebase存储中获取照片的路径，但"pic"返回"hello"反而.您可以在下面找到我的html代码:

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

解决方案

如果我正确理解了您的问题，原因是 then() 方法:传递给 then()的处理函数将返回URL的值.

上一段中重要的是使用 will :该方法是异步，因此不会立即返回结果.但是，JavaScript代码会继续执行:这就是为什么使用初始 hello 值执行 alert(this.pic); 行的原因.

尝试以下代码:

  getprofilepic(){fb.storage().ref('users/'+ this.uid +'/profile.jpg').getDownloadURL().then(imgurl => {警报(imgurl);//< -----在此处查看更改this.pic = imgurl;})警报(this.pic);//返回"hello"；}， 

在控制台中，您应该首先看到 hello ，然后是URL值.

结论:您只能在 then()块中获得对 getDownloadURL()方法的调用结果.

---

您将在Internet和SO上找到很多有关如何从异步调用返回响应的文献.一个很好的完整示例:如何做我从异步调用返回响应吗?.(我本来可以将您的问题标记为实际上是该问题的重复项.)

Hi all i am encountering an issue where my data is changed back to the original assignment. For example, I have the following data below:

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

With the function below, the alert returns "hello"

created() {
    this.uid = fb.auth().currentUser.uid;
    this.getprofilepic();
},

** getprofilepic function

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

If i were to put the alert into the fb.storage..., it returns the correct path as shown below:

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

Is there a reason why the data would override again? Thank you in advance for any help! :) I would like to v-bind:src to get the path of the photo from firebase storage but "pic" returns "hello" instead. You can find my html code below:

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

解决方案

If I correctly understand your question the reason is that the getDownloadURL() method is asynchronous. The result of the call to this function will be available only when the Promise returned by the method will be fulfilled. This is why we use the then() method: the handler function passed to then() will return the value of the URL.

What is important in the previous paragraph is the use of will: the method is asynchronous and therefore the result is not immediately returned. However, the JavaScript code continues to execute: this is why the line alert(this.pic); is executed with the initial hello value.

Try the following code:

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"
},

In the console, you should first see hello, then the URL value.

Conclusion: You can only get the result of the call to the getDownloadURL() method in the then() block.

---

You will find a lot of literature on the internet and on SO on how to return the response from an asynchronous call. A good and complete example: How do I return the response from an asynchronous call?. (I could have marked your question as duplicate of this question actually.)

这篇关于Firestore存储后无法在VueJS中分配数据var的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！