Svelte 中的单例

Question

我正在尝试制作一个 Svelte 应用程序，其中我有一个类（不是 svelte 组件）来创建音频源并管理它。

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

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

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

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

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

谢谢你

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

在我的应用程序中，我在打字稿文件中使用单例。然后，这个单例可以存储将在我的应用程序中从任何其他 .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)
    }

您可以将这个打字稿文件导入到一个简洁的组件中，如下所示：

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

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

但您也可以使用 svelte store 来做到这一点。您可以在 svelte 官方文档中找到一些示例。

Answer 3

实现此目的的最简单方法是创建一个全局 .ts 文件并将其导入到组件中。

音频.ts :

export const analyser: MediaAnalyser = new AudioAnalyser();

任何其他组件：

import { analyser } from './audio.ts'

对象

analyser

将与您的任何组件共享且相同。不需要单身人士。