Vue + Vuex + Phaser 반응형 통화에서 '이' 스코프가 손실됨

Vue + Vuex + Phaser 반응형 통화에서 '이' 스코프가 손실됨

이 질문에는 이미 다음과 같은 답이 있습니다.

콜백 내부의 올바른 '이것'에 액세스하는 방법 (15개 답변)

마감됨6년 전에.

저는 Vue + Vuex를 사용하여 게임을 만들려고 했지만 프로젝트 중간에 게임의 가장 상호작용적인 부분이 Phaser와 만들어져야 한다는 것을 깨닫고 그 부분에 Phaser를 사용하고 UI에는 Vue + Vuex를 유지하기로 결정했습니다.

제가 Vuex in Phaser에서 첫 번째 데이터를 얻으려고 하기 전까지는 모든 것이 예상보다 잘 진행되고 있었습니다. 문제는 현재 객체의 범위를 잃는다는 것입니다.

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

페이저의 이 코드에서._newCreatureRXVueX에서 호출됩니다. 호출하려고 할 때_addCreature라고 말하는 오류가 발생합니다._addCreature정의되지 않았습니다.그console.log(this)Vue 개체를 보여 줍니다.

어떻게 하면 이것이 제대로 작동합니까?프로젝트를 다르게 구성해야 합니까?

그store.watch메소드는 원래 컨텍스트에서 콜백 함수를 실행하지 않을 것입니다. 그것이 이유입니다.this틀렸습니다.

함수를 올바른 컨텍스트에 명시적으로 바인딩할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/41798549/losing-this-scope-in-a-vue-vuex-phaser-reactive-call