mcpField
S
sveltekit-data-flow

sveltekit-data-flow

github.com/spences10开发94496 次安装2 周前更新
代码仓库

关于 sveltekit-data-flow

面向 SvelteKit 开发者的数据流参考技能，说明加载函数、表单操作和错误处理的选择方式。还涵盖序列化规则及客户端认证后的数据失效处理。

主要功能

  1. 01区分服务端与通用加载函数
  2. 02使用表单操作处理提交
  3. 03通过 fail、redirect 和 error 处理结果
  4. 04说明数据序列化限制
  5. 05客户端认证后刷新数据

适用场景

  1. 01决定页面数据加载应放在哪个文件
  2. 02实现带错误处理的表单提交
  3. 03避免服务端返回不可序列化数据
  4. 04认证状态变化后使页面数据失效

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/spences10/svelte-skills-kit --skill sveltekit-data-flow

安装后在 Claude Code 中输入/sveltekit-data-flow确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

README.md
references/
client-auth-invalidation.md
error-redirect-handling.md
form-actions.md
load-functions.md
serialization.md

详细介绍

SvelteKit 数据流

快速入门

用哪个文件？ 仅服务器端（数据库/密钥）：+page.server.ts | 通用（两端都会运行）：+page.ts | API：+server.ts

加载决策： 需要服务器资源？→ 服务器端 load | 需要客户端 API？→ 通用 load

表单操作： 始终使用 +page.server.ts。错误时返回 fail()，导航时抛出 redirect()，失败时抛出 error()。

示例

// +page.server.ts
import { fail, redirect } from '@sveltejs/kit';

export const load = async ({ locals }) => {
	const user = await db.users.get(locals.userId);
	return { user }; // Must be JSON-serializable
};

export const actions = {
	default: async ({ request }) => {
		const data = await request.formData();
		const email = data.get('email');

		if (!email) return fail(400, { email, missing: true });

		await updateEmail(email);
		throw redirect(303, '/success');
	},
};

参考文件

注意事项

  • 服务器端 load → 通过 data 参数传递给通用 load | 始终 throw redirect()/error()
  • 服务器端 load 不可返回类实例/函数（无法序列化）
  • 上次验证时间： 2025-01-11

评论

支持 Markdown