在 load
函数内调用 fetch(url)
会将 url
注册为一个依赖项。有时使用 fetch
并不合适,这种情况下你可以使用 depends(url)
函数手动指定一个依赖项。
由于任何以 [a-z]+:
模式开头的字符串都是有效的 URL,我们可以创建自定义的失效键,比如 data:now
。
更新 src/routes/+layout.js
文件,使其直接返回一个值而不是进行 fetch
调用,并添加 depends
:
src/routes/+layout
export async function load({ depends }) {
depends('data:now');
return {
now: Date.now()
};
}
现在,更新 src/routes/[...timezone]/+page.svelte
中的 invalidate
调用:
src/routes/[...timezone]/+page
<script>
import { onMount } from 'svelte';
import { invalidate } from '$app/navigation';
let { data } = $props();
onMount(() => {
const interval = setInterval(() => {
invalidate('data:now');
}, 1000);
return () => {
clearInterval(interval);
};
});
</script>
<script lang="ts">
import { onMount } from 'svelte';
import { invalidate } from '$app/navigation';
let { data } = $props();
onMount(() => {
const interval = setInterval(() => {
invalidate('data:now');
}, 1000);
return () => {
clearInterval(interval);
};
});
</script>
上一页 下一页
1