Skip to main content

Svelte のリアクティビティは代入によってトリガーされるため、pushsplice のような配列のメソッドを使用しても更新が自動的に行われません。例えば、addNumber の内側で numbers.push(...) を呼び出していますが、'Add a number' ボタンをクリックしても今のところ何も起こりません。

これを修正する方法の1つとして、冗長に見えるかもしれませんが、代入を追加することです。

App.svelte
function addNumber() {
	numbers.push(numbers.length + 1);
	numbers = numbers;
}

もう少し慣用的な解決策もあります。

App.svelte
function addNumber() {
	numbers = [...numbers, numbers.length + 1];
}

同様のパターンで、popshiftunshiftsplice を置き換えることができます。

配列やオブジェクトの プロパティ への代入(例:obj.foo += 1array[i] = x)は値自体への代入と同じように動作します。

App.svelte
function addNumber() {
	numbers[numbers.length] = numbers.length + 1;
}

大まかなまとめ: 更新される変数の名前は、代入の左側に置かなければならない。例えばこれは…

const obj = { foo: { bar: 1 } };
const foo = obj.foo;
foo.bar = 2;

obj.foo.bar に対するリアクティビティはトリガーされません。もしトリガーしたければ、obj = obj を続けて書く必要があります。

Next: Props

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
	let numbers = [1, 2, 3, 4];
 
	function addNumber() {
		numbers.push(numbers.length + 1);
	}
 
	$: sum = numbers.reduce((total, currentNumber) => total + currentNumber, 0);
</script>
 
<p>{numbers.join(' + ')} = {sum}</p>
 
<button on:click={addNumber}>
	Add a number
</button>
 
initialising