Reactive Finite State Machines (FSM) in Composition API

Snippet

Reactive Finite State Machines (FSM) in Composition API

Using a Finite State Machine pattern within Vue's Composition API prevents 'impossible states'. Instead of juggling multiple booleans like isLoading and isError, you define a single reactive state source and explicit transitions, making complex UI flows predictable and easier to debug.

snippet.js
javascript
const state = ref('IDLE');
 
const machine = {
  IDLE: { START: 'LOADING' },
  LOADING: { SUCCESS: 'SUCCESS', FAILURE: 'ERROR' },
  ERROR: { RETRY: 'LOADING' },
  SUCCESS: { RESET: 'IDLE' }
};
 
function send(event) {
  const nextState = machine[state.value]?.[event];
  if (nextState) {
    state.value = nextState;
  }
}
 
// Usage: send('START');

vue

Breakdown

const state = ref('IDLE');

The single source of truth for the current state of the component.

const machine = { ... };

Defines the strictly allowed transitions between states to prevent logic errors.

state.value = nextState;

Reactive update that triggers UI changes based on the new valid state.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Reactive Finite State Machines (FSM) in Composition API

Related