SvelteKit 最新中文文档教程（6）—— 状态管理

[mqyqingfeng]

前言

Svelte，一个语法简洁、入门容易，面向未来的前端框架。

从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：

Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目。

为了帮助大家学习 Svelte，我同时搭建了 Svelte 最新的中文文档站点。

如果需要进阶学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！

欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上“前端大佬成长之路”。

状态管理

如果您习惯于构建仅客户端的应用程序，在跨服务端和客户端的应用中进行状态管理可能会让人感到望而生畏。本节提供了一些避免常见陷阱的建议。

避免在服务端共享状态

浏览器是有状态的 — 状态在用户与应用程序交互时存储在内存中。相反，服务端是无状态的 — 响应的内容完全取决于请求的内容。

从概念上来说是这样的。实际上，服务端通常是长期运行的，并由多个用户共享。因此，避免在共享变量中存储数据非常重要。例如，考虑以下代码：

// @errors: 7034 7005
/// file: +page.server.js
let user;

/** @type {import('./$types').PageServerLoad} */
export function load() {
	return { user };
}

/** @satisfies {import('./$types').Actions} */
export const actions = {
	default: async ({ request }) => {
		const data = await request.formData();

		// 永远不要这样做！
		user = {
			name: data.get('name'),
			embarrassingSecret: data.get('secret')
		};
	}
};

user 变量被所有连接到这个服务器的人共享。如果 Alice 提交了一个尴尬的秘密，而 Bob 在她之后访问页面，Bob 就会知道 Alice 的秘密。此外，当 Alice 当天晚些时候返回网站时，服务器可能已经重启，丢失了她的数据。

相反，您应该使用 cookies 对用户进行认证，并将数据持久化到数据库中。

load 函数中不要有副作用

出于同样的原因，您的 load 函数应该是纯函数 — 没有副作用（除了偶尔的 console.log(...)）。例如，您可能会想在 load 函数中写入 store 或全局状态，以便在组件中使用这个值：

/// file: +page.js
// @filename: ambient.d.ts
declare module '$lib/user' {
	export const user: { set: (value: any) => void };
}

// @filename: index.js
// ---cut---
import { user } from '$lib/user';

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

	// 永远不要这样做！
	user.set(await response.json());
}

与前面的例子一样，这将一个用户的信息放在了所有用户共享的地方。相反，应该直接返回数据...

/// file: +page.js
/** @type {import('./$types').PageServerLoad} */
export async function load({ fetch }) {
	const response = await fetch('/api/user');

+++	return {
		user: await response.json()
	};+++
}

...然后将它传递给需要它的组件，或使用 page.data。

如果您不使用 SSR，那么就不会有意外将一个用户数据暴露给另一个用户的风险。但您仍然应该避免在 load 函数中产生副作用 — 这样您的应用程序会更容易理解。

使用带上下文的状态和 stores

您可能会疑惑，如果我们不能使用全局状态，我们如何使用 page.data 和其他 app 状态（或 app stores）。答案是 app 状态和 app stores 在服务端使用 Svelte 的 context API — 状态（或 store）通过 setContext 附加到组件树上，当您订阅时，通过 getContext 检索它。我们可以用同样的方式处理我们自己的状态：

<!--- file: src/routes/+layout.svelte --->
<script>
	import { setContext } from 'svelte';

	/** @type {{ data: import('./$types').LayoutData }} */
	let { data } = $props();

	// 将引用我们状态的函数
	// 传递给上下文，供子组件访问
	setContext('user', () => data.user);
</script>

<!--- file: src/routes/user/+page.svelte --->
<script>
	import { getContext } from 'svelte';

	// 从上下文中获取 user store
	const user = getContext('user');
</script>

<p>Welcome {user().name}</p>

[!NOTE] 我们传递一个函数到 setContext 以保持跨边界的响应性。在这里阅读更多相关信息

[!LEGACY]
您也可以使用 svelte/store 中的 stores 来实现这一点，但在使用 Svelte 5 时，建议使用通用响应性。

在通过 SSR 渲染页面时，在更深层次的页面或组件中更新基于上下文的状态值不会影响父组件中的值，因为在状态值更新时父组件已经被渲染完成。

相比之下，在客户端（当启用 CSR 时，这是默认设置）这个值会被传播，层级更高的组件、页面和布局会对新值作出反应。因此，为了避免在水合过程中状态更新时值"闪烁"，通常建议将状态向下传递给组件，而不是向上传递。

如果您不使用 SSR（并且可以保证将来也不需要使用 SSR），那么您可以安全地将状态保存在共享模块中，而无需使用 context API。

组件和页面状态会被保留

当您在应用程序中导航时，SvelteKit 会复用现有的布局和页面组件。例如，如果您有这样的路由...

<!--- file: src/routes/blog/[slug]/+page.svelte --->
<script>
	/** @type {{ data: import('./$types').PageData }} */
	let { data } = $props();

	// 这段代码有 BUG！
	const wordCount = data.content.split(' ').length;
	const estimatedReadingTime = wordCount / 250;
</script>

<header>
	<h1>{data.title}</h1>
	<p>Reading time: {Math.round(estimatedReadingTime)} minutes</p>
</header>

<div>{@html data.content}</div>

...那么从 /blog/my-short-post 导航到 /blog/my-long-post 不会导致布局、页面和其他组件被销毁和重新创建。相反，data 属性（以及 data.title 和 data.content）将会更新（就像任何其他 Svelte 组件一样），而且因为代码不会重新运行，像 onMount 和 onDestroy 这样的生命周期方法不会重新运行，estimatedReadingTime 也不会重新计算。

相反，我们需要使这个值变成响应式：

/// file: src/routes/blog/[slug]/+page.svelte
<script>
	/** @type {{ data: import('./$types').PageData }} */
	let { data } = $props();

+++	let wordCount = $derived(data.content.split(' ').length);
	let estimatedReadingTime = $derived(wordCount / 250);+++
</script>

[!NOTE] 如果您需要在导航后重新运行 onMount 和 onDestroy 中的代码，您可以分别使用 afterNavigate 和 beforeNavigate。

像这样复用组件意味着侧边栏滚动状态等会被保留，您可以轻松地在变化的值之间实现动画效果。如果您确实需要在导航时完全销毁并重新挂载一个组件，您可以使用这种模式：

<script>
	import { page } from '$app/state';
</script>

{#key page.url.pathname}
	<BlogPost title={data.title} content={data.title} />
{/key}

在 URL 中存储状态

如果您有需要让状态能够在页面重新加载后依然保持，比如表格上的过滤器或排序规则，URL 搜索参数（如 ?sort=price&order=ascending）是存储它们的好地方。您可以把它们放在 <a href="..."> 或 <form action="..."> 属性中，或通过 goto('?key=value') 以编程的方式设置它们。它们可以在 load 函数中通过 url 参数访问，在组件中通过 page.url.searchParams 访问。

在快照中存储临时状态

某些 UI 状态，比如"列表是否展开？"，是可以丢弃的 — 如果用户导航离开或刷新页面，状态丢失并不要紧。在某些情况下，您确实希望在用户导航到另一个页面并返回时数据能够保持，但将状态存储在 URL 或数据库中会显得过度。对于这种情况，SvelteKit 提供了 快照，让您可以将组件状态与历史记录条目关联起来。

Svelte 中文文档

点击查看中文文档 - SvelteKit 状态管理。

系统学习 Svelte，欢迎入手小册《Svelte 开发指南》。语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！

此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答读者问等 14 个系列文章， 全系列文章目录：https://github.com/mqyqingfeng/Blog

欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上“前端大佬成长之路”。