Svelte v3 共享导出异步函数

Question

苗条 v3。我有一个 Shared.svelte 组件。

<script context="module">
    import {messages} from './store/store';

    export async function reloadData() {
        const url = 'https://domain.tld/api/v1/messages/';
        const response = await fetch(url);
        $messages = await response.json();
    }
</script>

我想在 App.svelte 中使用 reloadData() 函数。

<script>
// omitted
    import {reloadData} from "./Shared.svelte";

    onMount(async () => {
        await reloadData();
    })
</script>

我收到ReferenceError: reloadData is not defined

我怎样才能拥有一个使用商店的共享函数库。如果不是商店，我可以将其写入 .js 文件并导出默认值。但是导出默认值会导致错误提示我无法在 Svelte 组件中导出默认值。

我已阅读module context / exports

Answer 1

<script context="module"> 内部的这一行不应该编译：

        $messages = await response.json();

对我来说，它抛出：

Cannot reference store value inside <script context="module">

这意味着您不能在context="module" 中使用$ 语法，这是有道理的，因为$ 前缀本质上意味着“在创建组件时自动订阅，在组件被销毁时取消订阅”。但是模块范围没有实例。

我怎样才能拥有一个使用商店的共享函数库。

将其作为 问题...就像您尝试做的那样：在组件的 context=module 块内，或在原始 js 文件中。

Svelte 提供了在组件（实例）上下文之外使用存储的工具。事实上，store 的主要任务之一是在“原始”js 和 Svelte 组件上下文之间架起反应性桥梁。

如果您想更改可写存储的值（如您的示例中），请使用（可写）存储的set 方法：

messages.set(await response.json())

如果您只需要读取一次存储的值，请使用get helper：

import { get } from 'svelte/store'

const messagesValue = get(messages)

如果您需要跟踪值的变化，请订阅商店：

const dispose = messages.subscribe(messagesValue => {
  // do something with the value
  console.log(messagesValue)
})

// don't forget to call dispose when you're not interested in the value anymore!!

... 或使用 derived stores，以获得 Svelte 自动为您管理生命周期（处置）的优势。

您应该意识到 Svelte 商店实际上是一个非常简单的结构。它有一个 subscribe 方法，一个可选的 set 方法，基本上就是这样。阅读文档中的store contract：一切都在其中。三个简短的规则。这意味着您可以轻松处理它们（并创建新的类别），因为您已经知道所有需要知道的内容！