Vue.js 从套接字接收消息时数据不更新

Question

我正在尝试设计一个 vue.js 应用程序，该应用程序在收到来自套接字的"new_state"消息时更新有关游戏状态的数据。套接字是使用 django 通道实现的。

代码如下所示：

const ws_scheme = window.location.protocol == "https:" ? "wss" : "ws"
const gameSocket = new WebSocket(
ws_scheme +
'://'
+ window.location.host
+ '/ws/play/'
+ game_id
+ '/'
)
let vue = new Vue({
el: '#app',
data: {
current_turn: 0,
last_turn: -1,
current_card: 0,
last_card: -1,
number_of_stacked_cards: 0,
last_amount_played: 0,
won_by: -1,
my_cards: [],
other_players_data: {},
},
created() {
gameSocket.onmessage = function(e) {
data = JSON.parse(e.data)
this.current_turn = data.state.current_turn
this.last_turn = data.state.last_turn
// ... update the other data
};
},
});

当我收到消息时，记录数据可以明显地表明我正在接收正确的信息。但是，如果我在收到消息后键入vue.current_turn，它仍然是0而不是新值;对于data对象的所有其他成员也是如此。 我尝试过vue.current_turn = data.state.current_turn它确实以这种方式工作，但显然它应该适用于this.

我的代码有什么问题？

一般来说，完成我所追求的目标的最佳方法是什么，即在从套接字接收消息时更新内部数据变量？

我必须在不使用频道不支持的 socket.io 库的情况下使用。

Answer 1

问题是this指向任何所谓的gameSocket.onmessage，而不是"正常的 Vuethis"。

要解决此问题，您可以在gameSocket.onmessage上面执行let self = this并在其中使用self。