javascript - Typescript 全局应用程序状态到应用程序实例
问题描述
我是打字稿的新手,我正在开发一个 WebGL 查看器,并面临应用程序全局变量的问题。
问题是这样的,WebGL 查看器将是 Vue 组件,因此可以在同一页面上插入多个组件。我想将画布上下文和其他一些数据存储为全局数据,这样我就可以通过导入它来访问我的所有“.ts”文件。由于我尝试在同一页面上使用两个组件,因此全局状态相互啮合。
示例代码在这里
class AppState {
static CanvasID: string;
}
class viewer
{
constructor(canvasID: string)
{
AppState.CanvasID = canvasID;
}
getCanvasID()
{
return AppState.CanvasID;
}
}
class app
{
public viewer: viewer;
constructor(canvasID: string)
{
this.viewer = new viewer(canvasID)
}
getCanvasID()
{
return this.viewer.getCanvasID();
}
}
function clientCode() {
var app1 = new app("id1");
alert(app1.getCanvasID());
var app2 = new app("id2");
alert(app2.getCanvasID());
alert(app1.getCanvasID());
}
clientCode();
在上面的代码中,您可以看到当我创建新的应用程序实例(app2)时,“AppState.CanvasID”的值发生了变化。
我希望“AppState”对于每个实例都是本地的,并且我希望将“AppState”导入多个 .ts 文件并像全局一样使用。
我正在使用汇总构建为 esm 模块。
请就此提出您的建议。
解决方案
这是因为您将 AppState.CanvasId 设为静态。所以无论类的多少实例都指向同一个引用(你甚至没有创建新的 AppStates 所以在复古中应该更明显它是同一个引用。)。将其更改为不是静态的,您应该没问题。请注意,您需要在每个查看器中创建一个新的 AppState 实例,类似于您在应用程序类中创建查看器的方式。
但是如果你真的想要它是静态的,你可以像这个例子一样使用 Map。注意我将“CanvasID”更改为“CanvasIDs”
class AppState {
static CanvasIDs: Map<viewer, string> = new Map<viewer,string>();
}
class viewer
{
constructor(canvasID: string)
{
AppState.CanvasIDs.set(this, canvasID);
}
getCanvasID()
{
return AppState.CanvasIDs.get(this);
}
}
class app
{
public viewer: viewer;
constructor(canvasID: string)
{
this.viewer = new viewer(canvasID)
}
getCanvasID()
{
return this.viewer.getCanvasID();
}
}
function clientCode() {
console.log("test")
var app1 = new app("id1");
alert(app1.getCanvasID());
var app2 = new app("id2");
alert(app2.getCanvasID());
alert(app1.getCanvasID());
}
clientCode();
推荐阅读
- python-3.x - 大小不匹配,m1:[3584 x 28],m2:[784 x 128] 在 /pytorch/aten/src/TH/generic/THTensorMath.cpp:940
- vue.js - vue.js 使用 beforeRouteUpdate 将数据传递给路由
- paramiko - KeyboardInterrupt 处理非常慢。问题出在哪里?
- javascript - ajax 没有动态生成内容
- linux - Shell 脚本中的嵌套 Case 语句 | 获取语法错误
- time - 在一定时间后停止执行任务的简单方法(Xamarin.Android)
- solace - 使用 JBoss JNDI 缓解 JCA
- proxy - 如何在 docker-compose 中使用本地代理设置
- python - python 3.5 中的 dict.popitem()
- python - 左加入 NA