Dealing with this problem is tricky for me as it involves complex behavior that I haven't encountered before in JavaScript or Vue.js. I aim to simplify the code to focus on the most crucial aspects.
I utilize vue-class-component (6.3.2) to define my Vue (2.5.17) components as classes. Here's an example of such a component:
import GameInterface from '@/GameInterface';
class GameComponent extends Vue {
public gameInterface = GameInterface();
public mounted() {
this.gameInterface.launch();
}
}
The GameInterface function returns an object containing a launch method and other essential game variables.
The implementation of the launch method within the game interface file looks like this:
const GameInterface = function () {
const obj = {
gameState: {
players: {},
},
gameInitialized: false,
launch() => {
game = createMyGame(obj);
},
};
return obj;
}
export default GameInterface;
It functions correctly, passing the object to my Phaser game and allowing Vue to access it. However, I encountered an issue with a getter method in my Vue class:
get currentPlayer() {
if (!this.gameInterface.gameInitialized) return null;
if (!this.gameInterface.gameState.players[this.user.id]) {
return null;
}
return this.gameInterface.gameState.players[this.user.id];
}
Despite having the player's id available, the method still returns null. To solve this peculiar problem, I had to include
JSON.parse(JSON.stringify(gameState))get currentPlayer() {
// ...
if (!this.gameInterface.gameState.players[this.user.id]) {
JSON.stringify(this.gameInterface.gameState);
return null;
}
return this.gameInterface.gameState.players[this.user.id];
}
This workaround successfully retrieves the current player, although the fix seems unusual. My hypothesis is that bumping the object triggers Vue to update the data properly. Any insights into what might be missing here?