Managing Component Flow with an Object-Oriented State Machine

import { ref } from 'vue';
 
class CheckoutStateMachine {
  #transitions = {
    cart: ['shipping'],
    shipping: ['payment', 'cart'],
    payment: ['confirmation', 'shipping'],
    confirmation: []
  };
 
  constructor(initialState = 'cart') {
    this.currentState = initialState;
  }
 
  canTransitionTo(nextState) {
    return this.#transitions[this.currentState]?.includes(nextState) ?? false;
  }
 
  transition(nextState) {
    if (!this.canTransitionTo(nextState)) {
      return false;
    }
    this.currentState = nextState;
    return true;
  }
}
 
export function useCheckoutFlow() {
  const fsm = ref(new CheckoutStateMachine('cart'));
  return { fsm };
}