Question

我想从firestore OnSnapshot函数返回值，以便可以检索用户图像的url。我正在使用vuejs和firestore。而且我在创建的vue属性中具有published函数。

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;

        }

Answer 1

您可以将函数包装在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)

Answer 2

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


    }

无法从Vuejs方法和Firestore返回值

2 个答案: