Actions for modifying state in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when this Vue action is dispatched?

Consider a Vue 3 store with this action to increment a counter asynchronously. What will be the value of state.count after dispatching incrementAsync once?

Vue

import { reactive } from 'vue'

const state = reactive({ count: 0 })

const actions = {
  incrementAsync() {
    setTimeout(() => {
      state.count++
    }, 1000)
  }
}

actions.incrementAsync()

// After 1 second, what is state.count?

A 0 immediately, then 1 after 1 second

B 1 immediately

C 0 forever, no change

D Throws an error because state is reactive

💡 Hint

Think about when setTimeout runs and when the state changes.

The action uses setTimeout to delay incrementing state.count by 1 after 1 second. So initially, state.count is 0, then after 1 second it becomes 1.

📝 Syntax

intermediate

Which option correctly defines a Vue action that commits a mutation?

In Vue 3 with Composition API, which code snippet correctly defines an action that commits a mutation to update state?

A const actions = { updateName(name) { commit('setName', name) } }

B const actions = { updateName(context, name) { context.commit('setName', name) } }

C const actions = { updateName(context, name) { context.dispatch('setName', name) } }

D const actions = { updateName(state, name) { state.name = name } }

💡 Hint

Remember that actions receive a context object to commit mutations.

Actions receive a context object which has the commit method to call mutations. Option B correctly uses context.commit. Option B misses context, A wrongly uses dispatch, and D tries to mutate state directly in an action.

🔧 Debug

advanced

Why does this Vue action not cause a UI update?

Given this Vue 3 store code, why does calling actions.increment() not cause a UI update for state.count?

Vue

import { reactive } from 'vue'

const state = reactive({ count: 0 })

const actions = {
  increment() {
    state.count += 1
  }
}

// Called somewhere: actions.increment()

A Because the state object is not exported or used in a component

B Because actions must use a commit function to change state

C Because state is reactive, direct mutation inside actions is ignored

D Because the increment function is not bound to the store context

💡 Hint

Think about how Vue reactivity works and what triggers UI updates.

The state is reactive but if it is not used or referenced in any component or template, Vue will not track or update the UI. The action does update the state.count value, but if the state is not connected to a component, no visible change occurs.

❓ state_output

advanced

What is the final state after dispatching these Vue actions?

Given this Vue 3 store code, what is the value of state.items after calling actions.addItem('apple') then actions.removeItem('apple')?

Vue

import { reactive } from 'vue'

const state = reactive({ items: [] })

const actions = {
  addItem(item) {
    state.items.push(item)
  },
  removeItem(item) {
    const index = state.items.indexOf(item)
    if (index !== -1) {
      state.items.splice(index, 1)
    }
  }
}

actions.addItem('apple')
actions.removeItem('apple')

A ['apple', 'apple']

B ['apple']

C undefined

D [] (empty array)

💡 Hint

Think about how push and splice affect the array.

The first action adds 'apple' to the items array. The second action finds 'apple' and removes it. So the final array is empty.

🧠 Conceptual

expert

Why use actions instead of directly mutating state in Vue 3?

In Vue 3, why is it recommended to use actions to modify state instead of changing state directly in components?

A Direct mutation breaks Vue reactivity and stops UI updates

B Direct state mutation is forbidden and causes runtime errors

C Actions centralize state changes, making them easier to track and debug

D Actions automatically optimize performance by batching updates

💡 Hint

Think about maintainability and debugging in larger apps.

Using actions centralizes all state changes in one place, making it easier to track, debug, and maintain the app. Direct mutation is allowed but discouraged for clarity and control. Vue reactivity still works with direct mutation, and actions do not automatically batch updates.