Skip to main content
基本 Svelte
介绍
反应性
属性
逻辑
事件
绑定
类和样式
动作
转换
高级 Svelte
高级反应性
重用内容
运动
高级绑定
高级转换
上下文 API
特殊元素
<script module>
后续步骤
基本 SvelteKit
介绍
路由
加载数据
标题和 cookie
共享模块
表单
API 路由
$app/state
错误和重定向
高级 SvelteKit
钩子
页面选项
链接选项
高级路由
高级加载
环境变量
结论

最后,还有核选项 — invalidateAll()。这将不加区分地重新运行当前页面的所有 load 函数,而不管它们依赖什么。

¥Finally, there’s the nuclear option — invalidateAll(). This will indiscriminately re-run all load functions for the current page, regardless of what they depend on.

更新上一个练习中的 src/routes/[...timezone]/+page.svelte

¥Update src/routes/[...timezone]/+page.svelte from the previous exercise:

src/routes/[...timezone]/+page
<script>
	import { onMount } from 'svelte';
	import { invalidateAll } from '$app/navigation';

	let { data } = $props();

	onMount(() => {
		const interval = setInterval(() => {
			invalidateAll();
		}, 1000);

		return () => {
			clearInterval(interval);
		};
	});
</script>
<script lang="ts">
	import { onMount } from 'svelte';
	import { invalidateAll } from '$app/navigation';

	let { data } = $props();

	onMount(() => {
		const interval = setInterval(() => {
			invalidateAll();
		}, 1000);

		return () => {
			clearInterval(interval);
		};
	});
</script>

src/routes/+layout.js 中的 depends 调用不再是必要的:

¥The depends call in src/routes/+layout.js is no longer necessary:

src/routes/+layout
export async function load({ depends }) {
	depends('data:now');

	return {
		now: Date.now()
	};
}

invalidate(() => true)invalidateAll 不一样。invalidateAll 还会重新运行 load 函数,而没有任何 url 依赖,而 invalidate(() => true) 则不会。

¥[!NOTE] invalidate(() => true) and invalidateAll are not the same. invalidateAll also re-runs load functions without any url dependencies, which invalidate(() => true) does not.

1