$state — reaktiver Zustand

Was ist eine Rune?

Runes sind spezielle Symbole mit einem $-Präfix, die Svelte 5 dem Compiler als Anweisungen gibt. $state ist die grundlegendste: Sie macht aus einer Variable reaktiven Zustand. Ändert sich der Wert, aktualisiert Svelte automatisch jede Stelle im Markup, die ihn verwendet.

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Geklickt: {count}
</button>

Kein setState, kein .value, kein ref() — du änderst die Variable ganz normal (count++), und die Oberfläche folgt.

# Rails: @variable wird EINMAL gesetzt und gerendert
class DashboardController < ApplicationController
  def show
    @count = Order.count   # Snapshot zum Request-Zeitpunkt
    # Ändert sich etwas, muss die Seite neu geladen werden
  end
end

Live ausprobieren

Der folgende Zähler ist echter $state-Code aus dieser Seite:

Objekte und Arrays

$state funktioniert nicht nur mit Zahlen, sondern auch mit Objekten und Arrays — und zwar tief: Auch verschachtelte Änderungen und Array-Methoden wie push werden erkannt.

let user = $state({ name: 'Anna', punkte: 0 });

// Einfach mutieren — Svelte verfolgt auch verschachtelte Änderungen:
user.punkte += 10;
user.name = 'Bob';

let todos = $state([]);

todos.push('Milch kaufen');   // ✅ reaktiv
todos[0] = 'Brot kaufen';     // ✅ reaktiv
todos.length = 0;             // ✅ auch das

Zusammenfassung