vState
中文, A finite state machine based on vue, inspired byxstate,
--For now, it's just a try. Don't use in the production environment
goal
- typescript support
- More lightweight
- Restore XState's basic operations as much as possible
- Code generator that can reuse XState (vscode/ Web)
- Tree structure, easy to understand
- responsive
What is a finite state machine
If I have one of these states, "eating," "sleeping," and "checking my phone," and I have one or only one of these states in the middle of the day, then I can plan for that in the morning. If you can clearly identify each state in a project or component, it will be easier to complete the code and maintain it later.
state node
In vState, each state is a node on the tree, and there are various relationships between nodes.
There are several relationships:
-
Parallel
-
Affiliations
There are the following nodes,
-
Normal: independent state
-
Parallel: states can exist at the same time
-
end node:the end of a subtree-state
-
History node
There are the following state switches
-
on: manually controls the status switch
-
always:always behavior
-
invoke: asynchronous behavior
-
after: timer behavior
-
initial: init
State switching works like this: Each switch has one or more steps, each of which is divided into three parts (except initial)
- Target state
- guard
- Event
Only after the guard is passed does the actual switch take place and the event is executed, with the first failure taking the second step (if any) and the success not
Of course, these three parts can also be left blank. For example, there can be no guards or no targets at this time
context/event
Everything can't be represented as a state, like a number on a counter. You can't set every number to a state. You can put it in context and change the context by events.
Events can be triggered during these procedures
-
All state switches (except Initial)
-
enter: executed when enters the state
-
exit: executed when exit the state
tree structure
In VState, it goes like this: If I want to go from "looking at my phone while eating" to "falling asleep", I must first go from "looking at my phone while eating" to eating, and then from eating to "going back to my room", and then judge the specific situation. In short, it means that when you have to switch from one subtree to another, you have to go back from one of its subtrees. The steps will be more complex, but also more controlled (not like xstate)
start from pinia
In fact, the state, actions, and getter in Pinia can be easily incorporated into VState. In other words, vState is a finite-state Pinia.
You can convert Pinia to VState with a simple AST substitution