Question

我正在尝试使用Vue + Vuex制作游戏，但是在项目的中间我意识到游戏中最具互动性的部分必须用Phaser制作，然后我决定使用Phaser进行该部分并保持用户界面的Vue + Vuex。

在我尝试从Phaser中获取Vuex的第一个数据之前，一切都好于预期，问题是我失去了当前对象的范围。

我正在使用store.watch();来获取更改但是当我尝试调用其他函数时出现错误。

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);
  },
};

在Phaser的这段代码中，_newCreatureRX由VueX调用，当我尝试调用_addCreature时，我收到错误，告知_addCreature未定义。 console.log(this)显示Vue对象。

如何让它正常工作？我必须以不同的方式构建我的项目吗？

Answer 1

store.watch方法不会在原始上下文中执行回调函数，这就是this不正确的原因。

您可以通过

将函数显式bind到正确的上下文

store.watch(this._newCreatureGetter, this._newCreatureRX.bind(this))

在Vue + Vuex + Phaser无效呼叫中丢失'this'范围

1 个答案: