page

Basic SvelteKit / Stores

Part 3/ Stores/page

以前学んだように、Svelte の store は個々のコンポーネントに属さないデータを置くことができます。

SvelteKit では、3つの読み取り専用 store を $app/stores から使用できます — page、navigating、updated です。もっとも多く使用することになるのは page で、これは現在のページに関する情報を取得することができます:

• url — 現在のページの URL
• params — 現在のページのパラメータ
• route — 現在のルート(route)を表す id プロパティを持つオブジェクト
• status — 現在のページの HTTP ステータスコード
• error — 現在のページのエラーオブジェクト (エラーが存在する場合。以降の演習でエラーハンドリングを学習する予定です)
• data — 現在のページの data。全ての load 関数からの戻り値が足されたもの
• form — form action から返されるデータ

他の store と同様、コンポーネントでは $ シンボルを先頭に付けることでその値を参照することができます。例えば、現在のパス名は $page.url.pathname でアクセスできます:

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

<nav>
	<a href="/" aria-current={$page.url.pathname === '/'}>
		home
	</a>

	<a href="/about" aria-current={$page.url.pathname === '/about'}>
		about
	</a>
</nav>

<slot />