Svelte v3共享导出的异步功能

Question

Svelte 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组件中的默认值。

我已读取模块上下文/导出

Answer 1

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

$messages = await response.json();

对我来说，它抛出：

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

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

如何才能拥有使用存储的共享函数库。

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

Svelte提供了在组件(实例(上下文之外使用存储的工具。事实上，商店的主要任务之一是桥接"原始"js和Svelte组件上下文之间的反应性。

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

messages.set(await response.json())

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

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

或使用衍生商店，以使您的生命周期(处置(由Svelte为您自动管理。

您应该意识到，Svelte商店实际上是一个非常简单的构造。它有一个subscribe方法，一个可选的set方法，基本上，仅此而已。阅读文档中的商店合同：一切都在那里。三条简短的规则。这意味着你可以很容易地处理它们(并创建新的排序(，因为你已经知道了所有需要知道的事情！