SvelteKit中如何将表单数据存入Store后跳转至Track页面

1. 确保表单数据双向绑定 #

在RecordForm.svelte中，将所有表单字段双向绑定到组件内的对象（比如recordData），实时同步用户输入：

<script>
  let recordData = {
    title: '',
    artist: '',
    // 按实际需求定义其他表单字段
  };
</script>

<!-- 示例表单字段 -->
<div>
  <label>标题</label>
  <input type="text" bind:value={recordData.title} />
</div>
<div>
  <label>艺术家</label>
  <input type="text" bind:value={recordData.artist} />
</div>

2. 创建全局暂存Store #

在src/stores/recordStore.js中创建可写Store，用于临时存储record数据：

import { writable } from 'svelte/store';

export const recordStore = writable({});

// 可选：添加重置方法，提交成功后清空Store
export const resetRecordStore = () => {
  recordStore.set({});
};

3. 实现「Tracks」按钮逻辑 #

在RecordForm.svelte中导入Store和导航方法，给按钮添加点击事件，存储数据并跳转：

<script>
  import { recordStore } from '$stores/recordStore';
  import { goto } from '$app/navigation';
  // ...其他代码

  const handleGoToTracks = () => {
    // 深拷贝表单数据存入Store，避免后续修改影响存储值
    $recordStore = JSON.parse(JSON.stringify(recordData));
    // 跳转至Track页面（替换为你的实际路径）
    goto('/tracks/new');
  };
</script>

<!-- 必须设置type="button"，避免触发表单默认提交行为 -->
<button type="button" on:click={handleGoToTracks}>Tracks</button>

4. 返回Record页面时恢复数据 #

在RecordForm.svelte中通过onMount钩子从Store读取数据，恢复表单状态：

<script>
  import { onMount } from 'svelte';
  import { recordStore } from '$stores/recordStore';
  // ...其他代码

  onMount(() => {
    // 订阅Store并立即执行一次，恢复已有数据
    const unsubscribe = recordStore.subscribe(storeData => {
      if (Object.keys(storeData).length > 0) {
        recordData = { ...storeData };
      }
    });

    // 组件销毁时取消订阅，避免内存泄漏
    return unsubscribe;
  });
</script>

5. 合并数据提交补充 #

在Track页面完成操作后，提交时从recordStore取出数据，与tracks数据合并后一起提交到后端。提交成功后调用resetRecordStore()清空Store，避免下次进入表单残留旧数据。

排查之前失败的常见原因 #

• 未给按钮设置type="button"，点击时触发了表单默认提交，跳过自定义逻辑
• 表单字段未正确绑定到recordData，点击按钮时recordData为空对象
• Store导入路径错误，或未正确使用$语法访问Store值
• 点击事件函数名拼写错误，导致逻辑未触发

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