开发者问题收集

如何将数据从 Google Firestore 提取到我的 Vue 实例中?

2020-04-22
75

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

当第二个玩家加入时,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 对象: enter image description here

这实际上是回调中的“this”所指的:

enter image description here

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

1个回答

I am missing something

既然您正在使用 Vue + Firebase,为什么不使用 VueFire?

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

SC Kim
2020-04-22