Skip to main content
Svelte 基础
介绍
响应式
属性
逻辑
事件
绑定
类和样式
Actions
过渡动画
Svelte 进阶
高级响应性
复用内容
Motion
高级绑定
高级过渡效果
Context API
特殊元素
<script module>
后续步骤
SvelteKit 基础
介绍
路由
加载数据
请求头和 Cookie
共享模块
表单
API 路由
$app/state
错误和重定向
SvelteKit 进阶
钩子函数
页面选项
链接选项
高级路由
高级加载
环境变量
结论

updated 状态包含 truefalse,取决于自页面首次打开以来是否部署了新版本的应用。要使此功能生效,你的 svelte.config.js 必须指定 kit.version.pollInterval

src/routes/+layout
<script>
	import { page, navigating, updated } from '$app/state';
</script>
<script lang="ts">
	import { page, navigating, updated } from '$app/state';
</script>

版本变更只会在生产环境中发生,而不会在开发环境中发生。因此,在本教程中 updated.current 将始终为 false

你可以通过调用 updated.check() 手动检查新版本,而不受 pollInterval 的限制。

src/routes/+layout

{#if updated.current}
	<div class="toast">
		<p>
			A new version of the app is available

			<button onclick={() => location.reload()}>
				reload the page
			</button>
		</p>
	</div>
{/if}

在 SvelteKit 2.12 之前,你必须使用 $app/stores,它提供了具有相同信息的 $updated store。如果你目前正在使用 $app/stores,我们建议你迁移到 $app/state(需要 Svelte 5)。

在 GitHub 编辑此页面

上一页 下一页
1
2
3
<h1>home</h1>
<p>this is the home page.</p>