为什么+page.server.ts执行load后+page.svelte未重新加载？

核心问题原因 #

你的+page.svelte中，allRoles仅在组件初始化阶段从data中读取一次，后续SvelteKit在Action执行后重新注入新的data时，这个变量不会自动更新；同时你基于初始allRoles创建的roleStore也不会同步新数据，导致UI始终展示旧内容。

修复方案 #

方案1：用反应式语句同步data到store #

修改+page.svelte的script部分，添加反应式监听，当data更新时自动同步到roleStore：

<script lang="ts">
// (...) 保留原有导入语句

export let data: PageData;

// 初始化store
const roleStore = writable(data.allRoles);

// 反应式监听data变化，自动同步到store
$: roleStore.set(data.allRoles);

console.log("allRoles?", data.allRoles);

// (...) 保留其余代码
</script>

方案2：使用派生Store（更简洁） #

直接从data派生store，无需手动维护同步逻辑：

<script lang="ts">
// (...) 保留原有导入语句
import { derived } from 'svelte/store';

export let data: PageData;

// 从data派生store，自动同步更新
const roleStore = derived(() => data.allRoles, (roles) => roles);

// (...) 保留其余代码
</script>

原代码失效的逻辑说明 #

Svelte组件中，const { allRoles } = data;是一次性赋值操作，仅在组件首次渲染时执行。当Action完成后，SvelteKit会重新调用load并将新数据注入组件的data属性，但此时该常量不会重新计算，表格依赖的roleStore还是基于初始数据创建的，自然无法展示新添加的角色。

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