State machines with composables in Vue - Step-by-Step Execution

Concept Flow - State machines with composables

Define states and transitions

↓

Create composable function

↓

Initialize current state

↓

Expose state and transition function

↓

Component uses composable

↓

User triggers event

↓

Transition function checks event

↓

Update current state if valid

↓

Component re-renders with new state

This flow shows how a Vue composable manages states and transitions in a state machine, updating the component reactively.

Execution Sample

Vue

import { ref } from 'vue';

export function useToggle() {
  const state = ref('off');
  function toggle() {
    state.value = state.value === 'off' ? 'on' : 'off';
  }
  return { state, toggle };
}

A simple composable that manages a toggle state between 'off' and 'on'.

Execution Table

Step	Action	Current State Before	Event Triggered	State After	Component Update
1	Initialize composable	none	none	off	Component shows 'off'
2	User clicks toggle	off	toggle	on	Component updates to 'on'
3	User clicks toggle	on	toggle	off	Component updates to 'off'
4	User clicks toggle	off	toggle	on	Component updates to 'on'
5	No event	on	none	on	No change, component stays 'on'

💡 No further events triggered, state remains stable.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	Final
state.value	undefined	'off'	'on'	'off'	'on'	'on'

Key Moments - 3 Insights

Why does the component update when state.value changes?

Because state is a Vue ref, changes to state.value trigger reactive updates causing the component to re-render, as shown in steps 2, 3, and 4 in the execution_table.

What happens if an invalid event is triggered?

In this simple toggle example, only the 'toggle' event changes state. If no event or an unknown event occurs, the state stays the same, as shown in step 5.

Why do we use a composable for state machines?

Composables encapsulate state logic and transitions, making it reusable and clean. This separation helps components stay simple and focused on UI.

Visual Quiz - 3 Questions

Look at the execution_table, what is the state after step 3?

A 'on'

B 'undefined'

C 'off'

D 'toggle'

💡 Hint

Check the 'State After' column in row with Step 3.

At which step does the component first show 'on'?

A Step 1

B Step 2

C Step 3

D Step 5

💡 Hint

Look at the 'Component Update' column for when it changes to 'on'.

If the toggle function was never called, what would the final state be according to variable_tracker?

A 'off'

B 'on'

C 'undefined'

D No state

💡 Hint

Check the 'Start' and 'After 1' values in variable_tracker for state.value.

Concept Snapshot

State machines with composables in Vue:
- Define states and transitions inside a composable function.
- Use Vue's ref to hold current state reactively.
- Expose state and transition functions to components.
- Components reactively update when state changes.
- Composables keep logic reusable and clean.

Full Transcript

This visual execution shows how to build a simple state machine using Vue composables. We start by defining states and transitions inside a composable function. The current state is stored in a reactive ref. When the user triggers an event, the transition function updates the state if valid. This change causes the component to re-render and show the new state. The execution table traces each step: initialization, user toggles, and state updates. The variable tracker shows how the state variable changes over time. Key moments clarify why reactive refs cause updates and why composables help organize state logic. The quiz tests understanding of state changes and component updates. This approach helps beginners see how state machines work in Vue with composables.