Question

我正在尝试制作一个Svelte应用程序，在那里我有一个类（不是svelte组件）来创建一个AudioSource并对其进行管理。

我希望跨多个组件获取此类实例。

现在，我发现的唯一方法是这样做：

<script lang="ts" context="module">
  import { AudioAnalyser } from "@app/class/audio/AudioAnalyser";
  import type { MediaAnalyser } from "@app/types/analyser";

    let analyser: MediaAnalyser = new AudioAnalyser();
</script>

在一个组件内部，因此我确定只有一个实例，并通过与其他Component的属性绑定来共享该实例。

但是我试图找到一种方法，可以实例化该类一次并访问它，就像使用角度服务一样，它遍及了所有应用程序。

谢谢

Answer 1

您可以在常规脚本文件中完成此操作，而不必在一个苗条的组件中实例化它：

// analyser.ts
import { AudioAnalyser } from "@app/class/audio/AudioAnalyser";
import type { MediaAnalyser } from "@app/types/analyser";

const analyser: MediaAnalyser = new AudioAnalyser();

export default analyser

现在，您可以在任何需要的地方简单地导入它：

<script>
  import analyser from './analyser.ts'
</script>

实例化只会发生一次。

Answer 2

在我的应用程序中，我在打字稿文件中使用Singleton。然后，该单例可以存储将与其他任何.svelte组件在我的应用程序中共享的唯一数据。

您可以像这样创建打字稿Singleton：

export class EditorConfig {
    private static instance : EditorConfig;
    private constructor(){}
    public static getInstance(): EditorConfig {
        if(!EditorConfig.instance){
            EditorConfig.instance = new EditorConfig();
        }
        return EditorConfig.instance;
    }

    public myvariable = "";

    public helloworld(){
       EditorConfig.getInstance().myvariable = "hello world";
       console.log(EditorConfig.getInstance().myvariable)
    }

然后您可以将此打字稿文件导入一个像这样的苗条组件中：

<script>
   import {EditorConfig} from './EditorConfig.ts'

   EditorConfig.getInstance().helloworld()
</script>

但是您也可以通过苗条的商店来做到这一点。您可以在svelte officiel文档中找到一些示例。

斯维尔特（Svelte）的辛格尔顿（Singleton）

2 个答案: