Visualize your State Management with XState
summary
Claims practical XState patterns for complex Vue.js state: uses createMachine with context, actions and guards, composes machines as actors via the Vue composable and starts services with interpret. Builds a pizza checkout wizard (review → shipping → billing → payment → success), wires update events and guarded transitions, and exports JSON to a visualizer/editor. Demonstrates handling async submits by adding a submitting intermediate state or invoking services; live demo glitches but the machine and visualization export work.
AI-written summary · about
chapters (26)
- 0:00Intro
- 1:42Welcome
- 2:12Personal Experience
- 3:35What is State Management
- 4:14Gallery
- 4:43State Management
- 6:10Conference Experience
- 7:25State Diagram
- 7:54Stereo Diagram
- 8:17State Machines
- 10:23Fetch
- 11:35Code
- 12:49Fetch Example
- 14:38Live Demo
- 14:59Overview
- 15:54Pizza
- 16:18Car
- 20:59Move Next
- 21:30Save Only When Next
- 26:06Testing
- 26:36Shipping Address
- 32:17Previous Payment
- 32:34Agree to Terms
- 33:29Payment Method
- 34:14Visualizer
- 35:54QA
related talks
31mXState: the Visual Future of State Management
44mScaling State in Vue: Why XState Matters
27mXState: the Visual Future of State Management
33mVuex? No, it’s X(state)Vue for UI
31mVuex? No, it’s X(state)Vue for UI
30mA UI in All Its States with XState
40mCoding Complex App Logic, Visually
38mInto the Visual World of State Machines