@fgsreally/vstate v0.0.0
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
2 years ago