Svelteの中心にあるのは、アプリケーションの状態とDOMを同期させるための強力なリアクティビティシステムです。例えば、イベントへの応答などがあります。
countの宣言を、値を$state(...)でラップしてリアクティブにします。
App
let count = $state(0);これはルーンと呼ばれ、countが普通の変数ではないことをSvelteに伝える方法です。ルーンは関数のように見えますが、関数ではありません。Svelteを使用する際は、言語自体の一部となります。
残りはincrementを実装することだけです。
App
function increment() {
count += 1;
}1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
let count = 0;
function increment() {// TODO implement
}
</script>
<button onclick={increment}> Clicked {count} {count === 1 ? 'time' : 'times'}</button>