Scaling State in Vue: Why XState Matters
summary
Shows refactoring a Pinia-backed multistep signup form into an XState machine for Vue, replacing ad hoc step increments with a declared multistep form refactor that stores form data in machine context, uses guards for validation, and uses invoke for async submissions that auto-transition to success or error. Demo wires machine with Vue composition API, uses the Stately visualizer and inspector, demonstrates retry/reset flows, and largely works aside from a small demo bug.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 1:27State management matters
- 5:00State management in Vue
- 10:43State machines for complex state
- 14:20Live demo: XState form refactor
- 23:19Form navigation and validation
- 25:08Async operations with XState
- 28:19Error handling and reset
- 31:18Visualizing state machines
- 32:45Key benefits of XState
- 36:41When to use XState
- 37:04Q&A
related talks
40mVisualize your State Management with XState
31mVuex? No, it’s X(state)Vue for UI
33mVuex? No, it’s X(state)Vue for UI
31mXState: the Visual Future of State Management
30mA UI in All Its States with XState
45mState of the Art User Interfaces with State Machines
27mXState: the Visual Future of State Management
20mSetState, We Need to Talk!