javascript / expert
Snippet
Typsichere Zustandsautomaten mit Readonly
Die Verwaltung des UI-Status mit losen Booleans führt zu 'unmöglichen Zuständen'. Die Verwendung eines zentralen reaktiven Zustandsautomaten in Kombination mit 'readonly' stellt sicher, dass Zustandsübergänge nur über dedizierte Methoden erfolgen können, wodurch verhindert wird, dass externe Logik den internen Status korrumpiert.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { ref, readonly, computed } from 'vue';export function useAuthMachine() {const state = ref('IDLE'); // IDLE | LOADING | AUTHENTICATEDconst transition = (target) => {const validTransitions = {IDLE: ['LOADING'],LOADING: ['AUTHENTICATED', 'IDLE'],AUTHENTICATED: ['IDLE']};if (validTransitions[state.value].includes(target)) {state.value = target;}};return {state: readonly(state),isAuthenticated: computed(() => state.value === 'AUTHENTICATED'),login: () => transition('LOADING'),logout: () => transition('IDLE')};}
vue
Erklärung
1
state: readonly(state)
Exportiert eine schreibgeschützte Version des Status an den Konsumenten.
2
validTransitions[state.value]
Logikprüfung, um sicherzustellen, dass der Zustandsautomat vordefinierten Regeln folgt.