使用 Svelte 及时加载数据的好方法

Question

在 Svelte 中，我们有一种非常漂亮的方式来及时加载一些数据并使用 @const 渲染它：

<script>
    let a = false;
</script>

<button on:click={() => a = !a}></button>
{#if a}
    {@const table = axios.get(...)}
    {#await table}
        <Spinner />
    {:then table}
        ...
    {/await} 
{/if}

这样，我们就不必在主体中声明任何内容。但有时我们可能需要有一些逻辑在里面：

<script>
    let a = false;
</script>

<button on:click={() => a = !a}></button>
{#if a}
   {@const table = axios.get(...)}
   {#await table}
       <Spinner />
   {:then table}
       {#each table as x}
           <button on:click={() => x.open = true}>
               Open row!
           </button>
           {#if x.open === true}
               ...
           {/if}
       {/each}
   {/await} 
{/if}

它不会工作，因为表是一个@const。我想找到一种聪明而简单的方法来解决这个问题。我可以在这里使用任何好的做法来代替 @const 来不使用状态变量重载组件主体吗？

Answer 1

这里的关键是能够仅在需要时（呈现时）发送请求，而我的问题是它不能拥有自己的状态。我试图想象一些奇怪的或无状态的解决方案（而不是“x.open”），但没有想出任何有效的方法。事情是这样的：

<script>
    let a = false;
</script>

<button on:click={() => a = !a}></button>
{#if a}
   {@const table = axios.get(...)}
   {#await table}
       <Spinner />
   {:then table}
       {#each table as x}
           {@const open = new class { state = false; toggle = function () { return this.state = !this.state}}}
           <button on:click={() => open.toggle()}>
               Open row!
           </button>
           {#if open.state}
               ...
           {/if}
       {/each}
   {/await} 
{/if} 

这当然是行不通的，即使行得通——它离任何神圣的东西都太远了。

尽管如此。我有点明白了。如果任何实体应该有状态（如开放状态），那么它应该有自己的组件。它对于简单结构来说并不理想，但这是我想出的唯一合乎逻辑的解决方案。