javascript / intermediate
Snippet
Verwaltung von Komponentenabläufen mit einer objektorientierten Zustandsmaschine
Eine objektorientierte Zustandsmaschine kapselt Zustandsübergänge und Validierungsregeln. Das Halten dieser Zustandsmaschine in einem Vue-ref ermöglicht eine vorhersehbare und deklarative Ablaufsteuerung für mehrstufige Formulare oder Wizard-Komponenten.
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
24
25
26
27
28
29
30
31
import { ref } from 'vue';class CheckoutStateMachine {#transitions = {cart: ['shipping'],shipping: ['payment', 'cart'],payment: ['confirmation', 'shipping'],confirmation: []};constructor(initialState = 'cart') {this.currentState = initialState;}canTransitionTo(nextState) {return this.#transitions[this.currentState]?.includes(nextState) ?? false;}transition(nextState) {if (!this.canTransitionTo(nextState)) {return false;}this.currentState = nextState;return true;}}export function useCheckoutFlow() {const fsm = ref(new CheckoutStateMachine('cart'));return { fsm };}
vue
Erklärung
1
class CheckoutStateMachine {
Definiert eine Klasse zur Steuerung gültiger Zustandsübergänge.
2
#transitions = {
Speichert den Zustandsgraphen als privates Feld zum Schutz der Übergangsintegrität.
3
canTransitionTo(nextState) {
Prüft, ob der Wechsel in den Folgezustand den definierten Regeln entspricht.
4
transition(nextState) {
Führt den Zustandsübergang konditional aus und gibt einen booleschen Status zurück.