无法从 Vuejs 方法和 firestore 返回值

Question

我想从 Firestore OnSnapshot 函数返回值，以便我可以检索用户图像的 url。我正在使用 vuejs 和 firestore。我在 vue 的 created 属性中有 activeUserImg 函数。

activeUserImg: function () {
           const u = firebase.auth().currentUser;
firebase.firestore().collection('Colleges').doc(u.uid).onSnapshot(function(doc) {

         var img_arr=[];
        this.img_arr.push(doc.data())
        this.img= doc.data().logo
    });
      return this.img || this.$store.state.AppActiveUser.img;

        }

并且每次都将返回的值显示为未定义。

图片代码：

<img
v-if="activeUserImg.startsWith('http')"
key="onlineImg"
:src="activeUserImg"
alt="user-img"
width="40" height="40"/>
<img
v-else
key="localImg"
:src="require(`@/assets/images/portrait/small/${activeUserImg}`)"
alt="user-img"
width="40" height="40"/>

Answer 1

return 语句应该在 firestore 回调中，如下所示

activeUserImg: function () {
           const u = firebase.auth().currentUser;
firebase.firestore().collection('Colleges').doc(u.uid).onSnapshot(function(doc) {

     var img_arr=[];
    this.img_arr.push(doc.data())
    this.img= doc.data().logo
    return this.img || this.$store.state.AppActiveUser.img;
});


    }

Answer 2

您可以将函数包装在 promise 中，然后等待结果可用。

例子：

activeUserImg: () => {
    return new Promise(function(resolve, reject) {
          const u = firebase.auth().currentUser;

          firebase
            .firestore()
            .collection('Colleges')
            .doc(u.uid)
            .onSnapshot(function(doc) {
                var img_arr=[];
                this.img_arr.push(doc.data())
                this.img= doc.data().logo

                // return the result
                resolve(this.img || this.$store.state.AppActiveUser.img);
            });
    });
}

然后，您可以通过

activeUserImg.then(result => {
   console.log(result);
})

或者

const result = await activeUserImg()

console.log(result)