Svelteでの状態更新の処理

Svelteでリアクティブ割り当てを使用してコンポーネント内の状態更新を処理する方法

Svelteの優れた点の1つは、コンポーネントの状態を更新するために特別なことをする必要がないことです。

必要なのは割り当てだけです。

あなたが持っていると言うcount変数。簡単に使用して、それをインクリメントできます。count = count + 1、またはcount++

<script>
let count = 0

const incrementCount = () => { count++ } </script>

{count} <button on:click={incrementCount}>+1</button>

最新のWebフレームワークが状態を処理する方法に慣れていない場合、これは画期的なことではありませんが、Reactではどちらかを呼び出す必要がありますthis.setState()、またはを使用しますuseState()針。

Vueは、クラスとdataプロパティ。

両方を使用したことで、SvelteははるかにJavaScriptに似た構文であることがわかりました。

非常に迅速に学習される1つのことを認識する必要があります。それは、値を変更するときにも割り当てを行う必要があるということです。

文字列や数値などの単純な値の場合、Stringのすべてのメソッドが新しい文字列を返し、数値についても同じであるため、これはほとんどの場合与えられます。これらは不変です。

しかし、配列の場合はどうでしょうか。配列を変更するメソッドを使用することはできません。お気に入りpush()pop()shift()splice()…割り当てがないからです。それらは内部データ構造を変更しますが、Svelteはそれを検出できません。

さて、あなたできる引き続きそれらを使用しますが、操作を実行した後、次のように変数をそれ自体に再割り当てします。

let list = [1, 2, 3]
list.push(4)
list = list

これは少し直感に反しますが、すぐに覚えておくことができます。

または、spread演算子を使用して操作を実行できます。

let list = [1, 2, 3]
list = [...list, 4]

私の無料ダウンロードSvelteハンドブック


より洗練されたチュートリアル: