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

我是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设为静态。因此，无论它们有多少个实例都指向相同的引用（您甚至都没有创建新的AppState，因此在回溯中应该更明显地是相同的引用）。将其更改为非静态的就可以了。请注意，您将需要在每个查看器中创建一个AppState的新实例，类似于在app类中创建查看器的方式。

但是，如果您真的希望它是静态的，则可以在此示例中使用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();