如何从 Google Firestore 获取数据到我的 Vue 实例中？

Question

我正在创建一个游戏大厅，玩家在其中开始游戏并等待第二个玩家加入。

当第二个玩家加入时，Firestore 中包含游戏信息的文档会更新，并且玩家的姓名会存储在 playerJoined: 属性中。我成功收到了：

waitForOtherPlayer(gameId){
            this.unsubscribe = fb.firestore().collection("active-games").doc(gameId+'').onSnapshot(function(doc) {
                if(doc.data()!== undefined) {
                    if(doc.data().playerJoined !== null && doc.data().playerJoined !== undefined) {
                        this.playerJoined = doc.data().playerJoined  // I have a global var called playerJoined
                        console.log('1st this.playerJoined: '+this.playerJoined)
                        this.isPlayerJoined = true
                        console.log(this)
                        console.log(typeof this)
                    }
                } else {
                    console.log("Current data: ", doc.data());
                }
                return
            });
        },

一切顺利！ console.log() 证明收到了对方玩家的名字。但是我无法将其转发到全局 this 对象。

这是 Vue 对象：

而这其实就是回调中的“this”所指的：

我不知道如何将数据返回到 Vue 对象中，所以我可以将它传递给其他方法和 DOM 等。我真的整天都在试验东西，重新阅读所有相关的 Firestore 文档，但显然我遗漏了一些东西，我需要你的帮助才能找到它

Answer 1

我错过了什么

既然您使用的是 Vue + Firebase，为什么不使用 VueFire？

链接：https://vuefire.vuejs.org/