如何触发/强制更新 Svelte 组件

我正在尝试了解 svelte 3 反应性的事情......

1. 我想在单击按钮时强制刷新用户界面。我正在使用自定义组件AsyncFetcher接受 HTTP post 数据并返回data其插槽的对象（http post 结果）。

2. 我想要一个禁用功能。因此，当单击“禁用”按钮时，将调用 http api，然后刷新数据视图。

<script>
    export let id

    function onDisable() {
        fetch('disable-api-url', {id: id})
        // Then ??
        // What to do after the fetch call, to refresh the view
    }
</script>

<AsyncFetcher postParam={id} let:data>
    {data.name}

    <button on:click={??}>Refresh</button>
    <button on:click={onDisable}>Disable Item</button>
</AsyncFetcher>

我尝试做on:click={() => id=id}欺骗它刷新也没有用。如果id应该是一个对象而不是字符串id={...id}本来可以，但不幸的是，这里的情况并非如此。

实现这一目标的正确方法是什么？

使用组件来管理获取是非常不传统的。通常你会在里面获取数据onMount，或在事件处理程序中：

<script>
  import { onMount } from 'svelte';

  let initialData;
  let otherData;

  onMount(async () => {
    const res = await fetch('some-url');
    initialData = await res.json();
  });

  async function update() {
    const res = await fetch('some-other-url');
    otherData = await res.json();
  }
</script>

{#if initialData}
  <p>the data is {initialData.something}</p>
{/if}

<button on:click={update}>update</button>