context API memberi kita cara untuk meneruskan data ke bawah melalui komponen tanpa melalui setiap tingkat dengan props (prop drilling). API ini dapat digunakan sebagai solusi manajemen state yang sederhana.

context api ini mirip sekali dengan react useContext nya. namun di svelte lebih simple.

berikut ini contoh penggunaan Context API dengan stores.

// @filename: ~/stores/user.ts
// @noErrors
import { browser, dev } from '$app/environment'
import { writable } from 'svelte/store'

const defaultValue = 'data not found'
const initialValue = browser ? (localStorage.getItem('user') ?? null) : defaultValue

const user = writable(initialValue)

export default user

<script>
	import { setContext } from 'svelte';
	import user from '~/stores/user';

	setContext('dataUser', $user);
</script>

<slot />

<script>
	import { getContext, onMount } from 'svelte';

	let dataUser = getContext('dataUser');
	let parseDataUser = [];
	onMount(() => {
		if (dataUser !== null) {
			console.log([JSON.parse(dataUser).data.user]);
			parseDataUser = [JSON.parse(dataUser).data.user];
		}
	});
</script>

{#if parseDataUser.length > 0}
	{#each parseDataUser as valueParseDataUser}
		<p>{valueParseDataUser.name}</p>
	{/each}
{:else}
	<p>Not found</p>
{/if}