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.

Practice

1. What is the main purpose of using a state machine in a Vue composable?

easy

A. To manage and control the different states of an application clearly and predictably

B. To style components dynamically based on user input

C. To fetch data from an API asynchronously

D. To create reusable UI components without state

Solution

1. Step 1: Understand state machine role

   A state machine helps track and control states in a clear way, avoiding unpredictable behavior.

2. Step 2: Relate to Vue composables

   Vue composables organize this logic so it can be reused across components easily.

3. Final Answer:

   To manage and control the different states of an application clearly and predictably -> Option A

4. Quick Check:

   State machine purpose = Manage states clearly [OK]

Hint: State machines organize app states clearly, not styling or fetching [OK]

Common Mistakes:

• Confusing state machines with styling or data fetching
• Thinking composables only create UI components
• Assuming state machines handle API calls

2. Which of the following is the correct way to declare a reactive state variable for a state machine in a Vue composable?

easy

A. const state = reactive('idle')

B. const state = ref('idle')

C. const state = computed('idle')

D. const state = watch('idle')

Solution

1. Step 1: Identify reactive state declaration

   In Vue composables, ref is used to create a reactive primitive value like a string.

2. Step 2: Check other options

   reactive is for objects, computed is for derived values, and watch is for side effects, so they are incorrect here.

3. Final Answer:

   const state = ref('idle') -> Option B

4. Quick Check:

   Use ref for reactive primitives [OK]

Hint: Use ref() for reactive simple values like strings [OK]

Common Mistakes:

• Using reactive() for primitive values
• Confusing computed() with state declaration
• Using watch() to declare state

3. Given this Vue composable code, what will be the value of state.value after calling next() twice?

import { ref } from 'vue'

export function useMachine() {
  const state = ref('idle')
  function next() {
    if (state.value === 'idle') state.value = 'loading'
    else if (state.value === 'loading') state.value = 'success'
  }
  return { state, next }
}

medium

A. 'idle'

B. 'loading'

C. 'success'

D. undefined

Solution

1. Step 1: Trace first next() call

   Initial state is 'idle'. Calling next() changes it to 'loading'.

2. Step 2: Trace second next() call

   Now state is 'loading'. Calling next() again changes it to 'success'.

3. Final Answer:

   'success' -> Option C

4. Quick Check:

   Two next() calls move state from idle -> loading -> success [OK]

Hint: Trace state changes step-by-step for each next() call [OK]

Common Mistakes:

• Assuming state resets to 'idle'
• Forgetting second next() changes state again
• Confusing state.value with state itself

4. Identify the error in this Vue composable state machine code:

import { ref } from 'vue'

export function useMachine() {
  const state = ref('idle')
  function next() {
    if (state === 'idle') state.value = 'loading'
    else if (state.value === 'loading') state.value = 'success'
  }
  return { state, next }
}

medium

A. next() function is not returned

B. Missing import of ref from 'vue'

C. Cannot assign to state.value, should assign to state

D. Incorrect comparison: should use state.value instead of state

Solution

1. Step 1: Check state comparisons

   state is a ref object, so to compare its value, use state.value, not state directly.

2. Step 2: Verify other parts

   Import is correct, assignment to state.value is correct, and next() is returned properly.

3. Final Answer:

   Incorrect comparison: should use state.value instead of state -> Option D

4. Quick Check:

   Compare ref values with state.value [OK]

Hint: Always compare ref values with .value, not the ref object [OK]

Common Mistakes:

• Comparing ref object instead of its value
• Forgetting to return functions from composable
• Misassigning to ref object instead of .value

5. You want to extend a Vue composable state machine to handle a 'failure' state after 'loading'. Which change correctly adds this new state transition when next() is called from 'loading'?

hard

A. Add an else if: else if (state.value === 'loading') state.value = 'failure'

B. Replace the existing loading transition with state.value = 'failure' only

C. Add a new function to set state to 'failure' instead of modifying next()

D. Change initial state to 'failure' to handle errors

Solution

1. Step 1: Understand current transitions

   Currently, next() changes 'idle' -> 'loading' -> 'success'. To handle 'failure' after 'loading' when next() is called, add a new else if condition for 'loading' to transition to 'failure'.

2. Step 2: Identify correct addition

   Adding an else if for state.value === 'loading' to set state.value = 'failure' extends the state machine correctly without removing existing transitions.

3. Final Answer:

   Add an else if: else if (state.value === 'loading') state.value = 'failure' -> Option A

4. Quick Check:

   Add new transition for loading -> failure without removing others [OK]

Hint: Add a new else if condition for the failure state [OK]

Common Mistakes:

• Adding a duplicate else if for 'loading' which conflicts or is unreachable
• Adding separate functions instead of modifying next()
• Changing initial state instead of the transition