SvelteKit中store.set is not a function报错及响应式错误列表处理问题

问题核心 #

你遇到的两个关键问题：

1. 直接用splice修改$page.form.errors数组，Svelte无法检测到变化，所以each循环不更新；
2. $page是只读store，不能通过$page = $page触发响应，这会直接报错store.set is not a function。

你的需求是错误存在时显示提示容器，全删后隐藏，新错误出现时重新渲染，完全可以通过本地响应式变量配合Svelte的响应式规则实现。

解决方案 #

步骤1：将错误列表同步到本地响应式变量

因为$page不能修改，我们把错误列表拷贝到本地的响应式变量中，后续操作这个变量：

<script>
  import { page } from '$app/stores';
  // 本地响应式变量存储错误列表
  let errors = [];

  // 监听page store的变化，同步最新的错误列表
  $: if ($page.form?.errors) {
    // 用展开运算符创建新数组，确保响应式触发
    errors = [...$page.form.errors];
  }
</script>

步骤2：修改模板，用本地变量实现响应式更新

移除手动操作DOM的代码，通过更新本地errors数组让Svelte自动更新视图：

{#if errors.length > 0}
  <div class="toast toast-top toast-center w-4/12">
    {#each errors as error, i}
      <div class="alert alert-error">
        <div>
          <span>{error}</span>
        </div>
        <button
          class="btn btn-ghost"
          on:click={() => {
            // 用filter创建新数组，触发响应式更新
            errors = errors.filter((_, idx) => idx !== i);
          }}>X</button
        >
      </div>
    {/each}
  </div>
{/if}

为什么这样做？ #

• 响应式触发规则：Svelte通过赋值操作检测变化，filter会返回新数组，赋值给errors后会立即触发视图更新，each循环会自动移除对应的错误项；
• 只读store处理：$page是SvelteKit提供的只读路由状态store，只能读取不能修改，所以必须把需要操作的数据同步到本地变量；
• 自动处理容器显隐：当errors数组为空时，{#if errors.length > 0}条件不成立，容器会自动隐藏；新错误到来时，$page更新会同步到errors，容器重新显示。

内容的提问来源于stack exchange，提问作者0szi