Typescript 全局应用程序状态到应用程序实例

Question

我是 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();

在上面的代码中，您可以看到“AppState.CanvasID”的值在我创建新的应用实例（app2）时发生了变化。

我希望“AppState”对于每个实例都是本地的，并且我希望将“AppState”导入多个 .ts 文件并像全局一样使用。

我正在使用汇总构建为 esm 模块。

请就此提出您的建议。

Answer 1

这是因为您将 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();