Kürzlich stieß ich auf eine interessante Diskussion zum Thema "Full Stack Radio -
Bessere UI-Komponenten mit State Machines" . Der Punkt war, dass das Konzept einer Zustandsmaschine bei der Entwicklung von Vue-Komponenten helfen kann. Ich fing an, fertige Lösungen zu suchen, aber diese waren nicht so einfach, und ich wollte eine einfachere Implementierung vornehmen, über die ich in diesem Artikel sprechen möchte. Der Artikel kann nicht nur für Benutzer von Vue nützlich sein, sondern auch für Benutzer von Angular, React usw. sowie für Programmierer mit anderen Bezeichnungen.
Die Diskussion ging auf ein Thema ein, das allen nahesteht, die die Komponenten geschrieben haben. Stellen Sie sich vor. Sie schreiben eine Komponente, die Daten anfordert, und Sie müssen den Drehknopf anzeigen, während die Abfrage ausgeführt wird. Normalerweise erstellen Sie in solchen Fällen eine boolesche Variable isLoading. Anfangs ist isLoading = false, und bevor Sie Daten anfordern, setzen Sie die Variable isLoading auf true. Nachdem die Daten angekommen sind, setzen Sie sie erneut auf false. Die Sichtbarkeit von Spinnern ist an isLoading gebunden.
Dieser Ansatz funktioniert hervorragend. Das Bauteil ist aber selten so einfach. Und im Laufe der Arbeit müssen noch logische Variablen erstellt werden, die unterschiedliche Zustände speichern. Das Problem ist, dass wenn Sie eine Zustandsvariable haben, diese zwei Zustände erzeugt und zwei logische Variablen bereits vier Zustände haben, drei - acht usw. Und das Problem ist, dass der Programmierer möglicherweise einen Fehler macht und keine Zustände verarbeitet, in die das System geraten könnte. Und das führt zu einem Fehler. Außerdem ist es ziemlich schwierig, eine solche Komponente zu verstehen, und es müssen Bedingungen geschaffen werden.
Die Antwort ist eine Zustandsmaschine. Das Prinzip ist einfach: Sie beschreiben die Zustände, in denen sich das System befinden kann, und die Übergänge zwischen den Zuständen. Mit einer solchen Maschine können viele Fehler vermieden und der Zustand des Systems deklarativ bestimmt werden.
Es gibt einige Artikel zu diesem Thema (z. B.
Finite-State-Machines in Vue) , aber die meisten empfehlen nach einer kurzen Theorie, eine der vorgefertigten Bibliotheken
anzuschließen . Beispiel:
davidkpiano / xstate .
Ich fand xstate zu umständlich und wollte mein Fahrrad ausprobieren. Darüber hinaus ist dies ein guter Grund, ein neues Muster für mich zu erkennen.
Hier ist der Code zum Spielen -
State Machine mit Vue, Version 2 . Und hier ist die Rohversion mit einem etwas anderen Ansatz -
State Machine mit Vue, Version 1 .
Ich habe mit dem Artikel
State Machines angefangen.
Also die Zustandsmaschine:
class StateMachine { constructor (initialState, transitions) { this.state = initialState this.transitions = transitions } transition (nextState, method, params) { const transitionsArray = this.transitions[this.state] if(transitionsArray.indexOf(nextState) === -1) return this.state if(method) method(...params) this.state = nextState return this.state } }
Initialisiere es so:
const machine = new StateMachine('idle', { idle: ['waitingConfirmation'], waitingConfirmation: ['idle','waitingData'], waitingData: ['dataReady', 'dataProblem'], dataReady: ['waitingConfirmation'], dataProblem: ['waitingConfirmation'] })
Erstellen Sie in den Komponentenmethoden eine Übergangsfunktion:
transition(nextState, method = null, params = []) { this.machineState = machine.transition(nextState, method, params) }
In den Events schreiben wir sofort, wohin wir wollen:
@click=“transition('waitingConfirmation')"
Wenn Sie die Komponentenmethode gleichzeitig aufrufen müssen, schreiben Sie Folgendes:
@click="transition('waitingData', getData, [222])”
Der zweite Parameter ist die Komponentenmethode, die bei diesem Übergang aufgerufen werden muss.
Der dritte Parameter ist ein Array von Variablen für diese Methode.
Innerhalb der Methoden lautet der Aufruf:
this.transition('dataReady')
Ich habe die Tasten mit v-if bewusst nicht ausgeblendet, nur für den Moment, um ihre Schriftfarbe grau zu machen. Es ist jedoch klar, dass das Anklicken nicht funktioniert, wenn die Maschine dies nicht zulässt.
Im Allgemeinen funktioniert alles, die Lösung ist sehr einfach. Und vor allem ist es uns gelungen, die Funktionsweise der Komponente deklarativ zu beschreiben. Ich selbst bin fast bereit, diesen Ansatz in einer realen Anwendung anzuwenden, aber ich möchte die Vor- und Nachteile dieses Ansatzes verstehen und auf Ratschläge erfahrener Experten hören.