使用Typescript类时的Vue反应性

我有一个运行Typescript 3.6.3的Vue 2.6.10应用程序

我声明了一个Typescript类，它为应用程序执行一些标准函数。我有一个插件，它将该类的实例分配给Vue的原型

无论其类型如何，该实例化类的任何公共成员都不是被动的

我把这个例子浓缩下来

课程

类模块{
public _person=null；
构造函数（）{}
获取人物（）{
把这个还给你的人；
}
设置人员（val）{
这个。_person=val；
}
fetchData（）{
返回新承诺（（解决、拒绝）=>{
setTimeout（（）=>resolve（'Person data'），1000）；
});
}
}

插件和应用程序

const MyPlugin={
安装（Vue）{
Object.defineProperties（Vue.prototype{
$module:{value:new module（）}
});
}
};
常量应用={
名称：“应用程序”，
模板：`Hello{{{name}}
`，
计算：{
//希望解析为“个人数据”
姓名（）{
返回此。$module.person；
}
},
异步创建（）{
//我希望“数据”是“个人数据”
const data=wait this.$module.fetchData（）；
//正确记录“人员数据”
控制台日志（数据）；
此.$module.person=数据；
}
};

如果将类的实例传递给

Vue

的

数据

，那么一切都会按预期进行。这并不理想，但有以下工作：

const App = {
    name: 'App',

    template: `<p>Hello {{ name }}</p>`,

    computed: {
        // Expect to resolve to 'Person data'
        name() {
            return this.$module.person;
        }
    },

    data() {
        return {
            module: this.$module
        };
    },

    async created() {
        const data = await this.$module.fetchData();

        this.$module.person = data;
    }
};

const应用={
名称：“应用程序”，
模板：`Hello{{{name}}
`，
计算：{
//希望解析为“个人数据”
姓名（）{
返回此。$module.person；
}
},
数据（）{
返回{
模块：这是$module
};
},
异步创建（）{
const data=wait this.$module.fetchData（）；
此.$module.person=数据；
}
};