Svelte中{#await}块内变量绑定报错，求解决方案

Svelte禁止直接绑定{#await ... then}语句中声明的变量，因为该变量是块级的只读引用，不支持双向绑定。以下是几种可行的解决方式：

方法一：将异步数据赋值给本地可写变量 #

修改+page.svelte，先声明本地变量存储用户数据，再在{#await}块内将异步结果赋值给它：

<script>
  export let data;
  let { stream } = data;
  // 初始化本地变量，避免未加载时出现undefined报错
  let userData = { gender: '' };
</script>

{#await stream.user}
  <p>加载用户数据中...</p>
{:then user}
  <!-- 将异步获取的数据赋值给本地变量 -->
  {userData = user.data}
  <input type="text" bind:value={userData.gender} />
{:catch error}
  <p>加载失败：{error.message}</p>
{/await}

方法二：用响应式语句处理异步数据 #

通过响应式监听异步流的状态，提前将数据同步到本地变量：

<script>
  export let data;
  let { stream } = data;
  let userData = { gender: '' };

  // 响应式处理异步数据
  $: if (stream.user) {
    stream.user.then(user => {
      userData = user.data;
    }).catch(err => {
      console.error('加载失败', err);
    });
  }
</script>

{#if userData.gender !== undefined}
  <input type="text" bind:value={userData.gender} />
{:else}
  <p>加载中...</p>
{/if}

方法三：取消流式加载，直接返回同步数据 #

如果不需要流式加载的特性，可以修改+layout.js，等待数据加载完成后再返回：

import { api } from '$lib/utils/api';

/** @type {import('./$types').PageLoad} */
export async function load() {
    const user = await api.auth.user();
    return {
        user: user.data
    };
}

对应的+page.svelte就无需{#await}块，直接绑定数据：

<script>
  export let data;
  let userData = data.user;
</script>

<input type="text" bind:value={userData.gender} />

内容的提问来源于stack exchange，提问作者Andrea Lombardi