Typescript Vue 3检测不到对在Vue组件外部创建的对象所做的更改

我有一个阶级性格：

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;
        }
    }
    ....

类实例是在我的“网络代码”中的Vue组件外部创建的：

并用于主要部件：

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

问题是，每当我在vue组件之外的character类实例中更改任何内容（在我的网络代码中）-例如

character.setAttributeByType（attribute，value）

，vue都看不到更改。如果我直接在

character.vue

组件中执行此操作，它会工作（请参阅

addPoint

中的注释代码）

我尝试使用Proxy&Watch，但没有任何帮助。

您的问题是“身份”问题

Vue 3使用ES6代理使对象具有反应性。如果执行

const data=reactive（payload）

，则

数据

与

有效负载

是不同的对象（与Vue 2中仅使用reactive setters/getter修改对象不同）

同样适用于选项API（您正在使用）。如果在

data（）

中执行

character:Player.character

，则结果是

此.character

（在Vue组件内部）与

Player.character

不同。您可以通过执行

console.log（this.character==Player.character）

轻松测试它。例如，在

mounted（）

-结果将是

false

因此，如果您使用

this.character

（Vue被动代理）进行任何更改，Vue将检测到更改并重新渲染（并将更改传播到原始对象），但如果您更改原始对象

Player.character

，则Vue不会检测到更改

简单的修复方法是使用Vue，它允许您在Vue组件之外使用Vue反应性

import{reactive}from`vue`
Player.character=reactive（新角色（data.data））；

---

现在，当您在Vue组件中使用

Player.character

初始化

data（）

时，Vue会发现它已经是一个反应代理，不再将其包装在代理中

向我们显示实例化类并“将其放入”Vue（父组件）中的代码。@MichalLevýProblém是代码没有在Vue组件中实例化。它在外部实例化，并且仅在vue组件Game.vue->character:Player.character（Player.character是对实例的引用）Game.vue中将角色绑定到character.vue中。实例是在收到数据包开始游戏时创建的，即在自定义处理程序中。@MichalLevý唯一的解决方法是更改VUe组件中的道具值。然后是工作或强制重新加载不好。但是类内部或Vue组件外部的更改没有注册，有没有办法在Vue组件外部查看这些更改？显示代码！它是如何“放置在vue组件游戏中的。vue”？@MichalLevý可能就足够了，或者如果您能给我发送PM，我可以在github中提供完整的代码

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