State machines with composables in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Vue component using a state machine composable?

Consider a Vue 3 component that uses a composable to manage a simple toggle state machine with states 'off' and 'on'. The component shows the current state and a button to toggle it.

What will the component display after clicking the toggle button twice?

Vue

import { ref } from 'vue';

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

export default {
  setup() {
    const { state, toggle } = useToggleMachine();
    return { state, toggle };
  },
  template: `<div><p>State: {{ state }}</p><button @click="toggle">Toggle</button></div>`
};

A <div><p>State: off</p><button>Toggle</button></div>

B <div><p>State: on</p><button>Toggle</button></div>

C <div><p>State: off</p><button>Toggle</button></div> after two clicks

D <div><p>State: on</p><button>Toggle</button></div> after two clicks

💡 Hint

Each click toggles the state between 'off' and 'on'. Starting from 'off', two toggles bring it back to 'off'.

The toggle function switches the state from 'off' to 'on' or vice versa. Starting at 'off', clicking twice toggles to 'on' then back to 'off'. So the displayed state after two clicks is 'off'.

📝 Syntax

intermediate

Which option correctly defines a composable for a state machine with states 'idle', 'loading', and 'success'?

Choose the correct Vue composable code that initializes a state machine with three states: 'idle', 'loading', and 'success', starting at 'idle'. It should provide a method to transition to 'loading' and then to 'success'.

A

import { ref } from 'vue';
export function useMachine() {
  const state = ref('idle');
  function start() { state = 'loading'; }
  function finish() { state = 'success'; }
  return { state, start, finish };
}

B

import { reactive } from 'vue';
export function useMachine() {
  const state = reactive({ current: 'idle' });
  function start() { state.current = 'loading'; }
  function finish() { state.current = 'success'; }
  return { state, start, finish };
}

C

import { ref } from 'vue';
export function useMachine() {
  const state = ref('idle');
  function start() { state.value = 'loading'; }
  function finish() { state.value = 'success'; }
  return { state, start, finish };
}

D

import { ref } from 'vue';
export function useMachine() {
  let state = 'idle';
  function start() { state = 'loading'; }
  function finish() { state = 'success'; }
  return { state, start, finish };
}

💡 Hint

Remember to use ref for reactive primitive values and update state.value.

Option C correctly uses ref to create a reactive state and updates state.value. Option C uses reactive but wraps the state in an object which is valid but less direct. Option C uses a plain variable, so changes won't be reactive. Option C tries to assign directly to state instead of state.value, which is incorrect.

🔧 Debug

advanced

What error does this Vue composable code produce?

Analyze the following composable code for a state machine. What error will it cause when used in a component?

Vue

import { ref } from 'vue';

export function useCounterMachine() {
  const count = ref(0);
  function increment() {
    count += 1;
  }
  return { count, increment };
}

A TypeError: count is not a function

B TypeError: Assignment to constant variable

C ReferenceError: count is not defined

D No error, works correctly

💡 Hint

Check how count is updated inside increment.

The variable count is a constant ref object. The code tries to assign directly to count instead of updating count.value. This causes a 'Assignment to constant variable' error.

❓ state_output

advanced

What is the value of 'status' after calling 'next()' three times in this state machine composable?

Given this composable managing states 'start', 'middle', and 'end' in order, what is the value of status after calling next() three times?

Vue

import { ref } from 'vue';

export function useStepMachine() {
  const states = ['start', 'middle', 'end'];
  const index = ref(0);
  const status = ref(states[index.value]);

  function next() {
    if (index.value < states.length - 1) {
      index.value++;
      status.value = states[index.value];
    }
  }

  return { status, next };
}

A 'end'

B 'middle'

C 'start'

D undefined

💡 Hint

Think about how the index changes and when it stops incrementing.

The next() function increments the index until it reaches the last state. After three calls, the index stops at the last state 'end', so status is 'end'.

🧠 Conceptual

expert

Which statement best describes the benefit of using composables for state machines in Vue?

Choose the best explanation for why composables are useful when implementing state machines in Vue applications.

A Composables enforce strict typing on all state transitions at compile time.

B Composables automatically generate UI elements for each state without manual coding.

C Composables replace Vue's reactivity system with a simpler state management approach.

D Composables allow state machines to be reused across components with isolated reactive state and logic encapsulation.

💡 Hint

Think about how composables help organize and reuse code in Vue.

Composables encapsulate reactive state and logic, making state machines reusable and isolated per component. They do not auto-generate UI, replace reactivity, or enforce compile-time typing.