During my attempt to develop a game using Vue + Vuex, I encountered an interesting challenge. I realized that the most interactive aspect of the game needed to be built with Phaser instead. As a result, I made the decision to utilize Phaser for that specific part while continuing to use Vue + Vuex for the user interface.
Initially, everything seemed to be progressing smoothly until I attempted to retrieve data from Vuex within Phaser and encountered an issue with losing the scope of the current object.
I utilized store.watch(); in order to monitor changes but faced difficulties when trying to call other functions, resulting in errors.
import store from '../vuex/store';
import Creature from './Creature';
const creatures = [];
export default {
create() {
store.watch(this._newCreatureGetter, this._newCreatureRX);
for (const creature of this._creaturesGetter()) {
this._addCreature(creature);
}
},
_addCreature(creature) {
creatures.push(new Creature(this.game, creature));
},
_newCreatureGetter() {
return store.state.newCreature;
},
_newCreatureRX(newCreature) {
console.log(this);
this._addCreature(newCreature);
},
};
Within this snippet of code from Phaser, _newCreatureRX is called by Vuex. However, upon trying to execute _addCreature, I encountered an error indicating that it was not defined. The console.log(this) revealed a Vue object.
How can I resolve this issue and ensure proper functionality? Should I consider restructuring my project?