Finite State Machines in Vue 3 - Sarah Dayan

There are many ways to represent state in modern web applications. In Vue, you can use local state, encapsulated within components, or global state, using a state management library like Vuex. It usually works the same way: you represent it with properties that you can change, and you use these properties to determine view logic. State changes are imperative most of the time: you set up event listeners to update reactive properties, and condition them with if statements. As the application grows, this quickly turns into a tangled mess: new conditions, new events, new corner cases. Before you know it, you end up with contradictory instructions that set your view in an inconsistent state. This is what state machines attempt at solving. Finite state machines let you represent the behavior of a system that can be in only one state at any given time. There’s a finite number of possible states, triggered by a limited number of possible events. Instead of defining imperative UI flows and losing track of their logic, state machines make state changes first-class citizens by letting you model them declaratively. We’ll see how state machines wonderfully fit into Vue’s reactive model. We’ll live code a non-trivial project that leverages state machines with the Composition API, and see how it results in readable, declarative, reliable code that’s easy to reason with.