Reactivity / Derived state • Svelte Tutorial

Basic Svelte Reactivity Derived state

しばしば、他の state から導出(derive)した state が必要になることがあるでしょう。このために、$derived Rune があります:

App

let numbers = $state([1, 2, 3, 4]);
let total = $derived(numbers.reduce((t, n) => t + n, 0));

これをマークアップで使用できます:

App

<p>{numbers.join(' + ')} = {total}</p>

$derived 宣言の中の式は、それが依存するもの (この演習では numbers) が更新されるたびに再評価されます。通常の state とは違い、derived state は読み取り専用です。

previous next

<script>

	let numbers = $state([1, 2, 3, 4]);

	function addNumber() {

		numbers.push(numbers.length + 1);

</script>

<p>{numbers.join(' + ')} = ...</p>

<button onclick={addNumber}>

	Add a number

</button>

show text show editor