javascript / expert
Snippet
Reaktive endliche Zustandsautomaten (FSM) in der Composition API
Die Verwendung eines Finite-State-Machine-Musters in der Composition API von Vue verhindert 'unmögliche Zustände'. Anstatt mit mehreren Booleans wie isLoading und isError zu jonglieren, definieren Sie eine einzige reaktive Statusquelle und explizite Übergänge, was komplexe UI-Flüsse vorhersehbar und einfacher zu debuggen macht.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const state = ref('IDLE');const machine = {IDLE: { START: 'LOADING' },LOADING: { SUCCESS: 'SUCCESS', FAILURE: 'ERROR' },ERROR: { RETRY: 'LOADING' },SUCCESS: { RESET: 'IDLE' }};function send(event) {const nextState = machine[state.value]?.[event];if (nextState) {state.value = nextState;}}// Usage: send('START');
vue
Erklärung
1
const state = ref('IDLE');
Die einzige 'Source of Truth' für den aktuellen Zustand der Komponente.
2
const machine = { ... };
Definiert die streng erlaubten Übergänge zwischen Zuständen, um Logikfehler zu vermeiden.
3
state.value = nextState;
Reaktives Update, das UI-Änderungen basierend auf dem neuen gültigen Zustand auslöst.