Svelte 中的单身人士答案

【问题标题】：Singleton in SvelteSvelte 中的单身人士
【发布时间】：2020-10-23 02:51:31
【问题描述】：

我正在尝试制作一个 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>

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

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

谢谢

【问题讨论】：

您必须使用 App.svelte 上下文进行初始化。问题是关于范围界定。如果您的范围是整个应用程序，请不要在子组件中实例化。
如果我在工作，请纠正我，但目前看来解决方案不适用于 SSR（服务器端渲染）。

标签： svelte

【解决方案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>

实例化只会发生一次。

【讨论】：

【解决方案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 官方文档中找到一些示例。

【讨论】：