I am working with a class called Character in a file named Character.ts
/// This is called when server responds
public setAttributeByType(type: StatsTypes, value: number): void {
switch (type) {
case StatsTypes.STRENGTH:
case StatsTypes.DEXTERITY:
case StatsTypes.VITALITY:
case StatsTypes.INTELIGENCE:
this.stats[type] = value;
break;
default: break;
}
}
....
The instance of the class is created outside of a Vue component in my "networking code":
public static onStartGame(data:any):void {
Player.character = new Character(data.data);
Game.displayGamePage(PagesIndex.GAME_PAGE);
requestAnimationFrame(Game.loop);
}
This instance is then used in the main component:
Game.vue
import { defineComponent } from 'vue'
import Player from '@/Player/player';
import SceneManager, { Scenes } from '@/Render/scene_manager';
import Scene from '@/Render/scene';
import MainScene from "@/Render/scenes/main";
import MapScene from "@/Render/scenes/map";
import Game from '@/game/game';
// Components
import VplayerBar from "@/vue/subs/playerBar.vue";
import Vcharacter from "@/vue/subs/character.vue";
export enum GamePages {
MAIN_PAGE = 1,
MAP_PAGE,
}
export default defineComponent({
name: "game",
components: {
VplayerBar,
Vcharacter,
},
data() {
return {
page: GamePages.MAIN_PAGE,
scenes: Scenes,
gamePages: GamePages,
player: Player,
character: Player.character, /* <------------ Reference to class */
pages: {
character: false,
}
}
},
})
...and passed down as a prop to the character.vue component
export default defineComponent({
name: "character",
props: {
character: { // <---- This prop does not change
type: Character,
required: true
},
toggleCharacter: {
type: Function,
required: true
}
},
components: {
VBackpack,
VInventory
},
data() {
return {
StatsTypes,
}
},
methods: {
toglePage() {
this.toggleCharacter()
},
getPortrait(isMobile:boolean = false) {
return Character.getCharacterPortrait(this.character.faction, this.character.gender, isMobile);
},
addPoint(attribute:StatsTypes, value: number) {
if (GKeyHandler.keys[Keys.SHIFT_LEFT])
value = 10;
CharacterHandler.addAttributePoint(Player.character, attribute, value);
//this.character.stats[StatsTypes.STRENGTH] += 1;
}
}
});
The issue I am facing is that changes made to the character class instance outside the vue component (in my networking code) are not reflected in Vue. However, making changes directly inside the character.vue component works fine (as seen in the commented code in addPoint)
I attempted to use Proxy and Watch but it did not solve the problem.