Svelte 中的单例

Question

我正在尝试制作一个 Svelte 应用程序，其中我有一个 class（非 Svelte 组件）创建音频源并对其进行管理。

我想跨多个组件获取此 class 实例。

现在，我找到的唯一方法就是这样做：

<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>

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

但我正在尝试找到一种方法，我可以将此 class 实例化一次并像使用 angular 服务一样通过所有应用程序访问它。

谢谢

Answer 1

您可以在常规脚本文件中执行此操作，而不是在 svelte 组件中进行实例化：

// 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

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

您可以像这样创建一个打字稿单例：

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)
    }

你可以像这样将这个 typescript 文件导入到一个 svelte 组件中：

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

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

但您也可以使用 svelte store 执行此操作。您可以在 svelte 官方文档中找到一些示例。

Svelte 中的单例

Singleton in Svelte

svelte