Actions for modifying state in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an action that commits a mutation.

Vue

const actions = {
  increment({ commit }) {
    commit([1], 1)
  }
}

Drag options to blanks, or click blank then click option'

A"updateValue"

B"setCount"

C"incrementCount"

D"changeState"

Attempts:

3 left

💡 Hint

Common Mistakes

Using a mutation name that does not exist.

Forgetting to put the mutation name in quotes.

The action commits the mutation named incrementCount to update the state.

2fill in blank

medium

Complete the code to dispatch an action named 'fetchData'.

Vue

methods: {
  load() {
    this.$store.[1]('fetchData')
  }
}

Drag options to blanks, or click blank then click option'

Adispatch

Bcommit

Ccall

Drun

Attempts:

3 left

💡 Hint

Common Mistakes

Using commit instead of dispatch to call an action.

Using a method name that does not exist on the store.

Use dispatch to call an action in Vuex.

3fill in blank

hard

Fix the error in the action to correctly commit a mutation with a payload.

Vue

const actions = {
  updateName({ commit }, name) {
    commit([1], name)
  }
}

Drag options to blanks, or click blank then click option'

Aupdate_name

B"update_name"

CupdateName

D"updateName"

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the mutation name without quotes causing a reference error.

Using snake_case mutation name when camelCase is expected.

The mutation name must be a string, so it needs quotes around it.

4fill in blank

hard

Fill both blanks to create an action that commits a mutation with a payload and returns a promise.

Vue

const actions = {
  saveData({ [1] }, payload) {
    return new Promise((resolve) => {
      [2]('saveData', payload)
      resolve()
    })
  }
}

Drag options to blanks, or click blank then click option'

Acommit

Bdispatch

CcommitMutation

DcommitMutationAsync

Attempts:

3 left

💡 Hint

Common Mistakes

Using dispatch instead of commit to call a mutation.

Not returning a promise when asynchronous behavior is expected.

The action uses commit to call the mutation and returns a promise to signal completion.

5fill in blank

hard

Fill all three blanks to define an action that commits a mutation, handles an error, and returns a promise.

Vue

const actions = {
  async fetchUser({ [1] }, userId) {
    try {
      const user = await api.getUser(userId)
      [2]('setUser', user)
      return user
    } catch (error) {
      [3](error)
    }
  }
}

Drag options to blanks, or click blank then click option'

Acommit

Cconsole.error

Dconsole.log

Attempts:

3 left

💡 Hint

Common Mistakes

Not destructuring commit from context.

Using console.log instead of console.error for errors.

Not awaiting the API call.

The action destructures commit to call the mutation, and uses console.error to log errors.

Practice

1. In Vue, what is the main purpose of an action in state management?

easy

A. To define computed properties for reactive data

B. To perform asynchronous operations and then commit mutations to change state

C. To render components based on state changes

D. To directly modify the state without any intermediate steps

Solution

1. Step 1: Understand what actions do

   Actions in Vuex or Vue state management are designed to handle asynchronous tasks or complex logic before changing the state.

2. Step 2: Differentiate actions from mutations

   Actions do not directly modify state; instead, they commit mutations which then update the state safely.

3. Final Answer:

   To perform asynchronous operations and then commit mutations to change state -> Option B

4. Quick Check:

   Actions handle async tasks = D [OK]

Hint: Actions handle async tasks before state changes [OK]

Common Mistakes:

• Thinking actions directly modify state
• Confusing actions with mutations
• Believing actions render UI components

2. Which of the following is the correct syntax to dispatch an action named fetchData in a Vue component?

easy

A. this.$store.dispatch('fetchData')

B. this.dispatch('fetchData')

C. dispatch('fetchData')

D. this.commit('fetchData')

Solution

1. Step 1: Recall Vuex dispatch syntax

   To call an action, you use this.$store.dispatch('actionName') inside a Vue component.

2. Step 2: Differentiate dispatch from commit

   commit is used for mutations, not actions. Dispatch is the correct method for actions.

3. Final Answer:

   this.$store.dispatch('fetchData') -> Option A

4. Quick Check:

   Dispatch actions via this.$store.dispatch = B [OK]

Hint: Use this.$store.dispatch('actionName') to call actions [OK]

Common Mistakes:

• Using commit instead of dispatch for actions
• Calling dispatch without this.$store
• Trying to dispatch directly without context

3. Given the Vuex store action below, what will be the final state of count after dispatching incrementAsync?

actions: {
  incrementAsync({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
},
mutations: {
  increment(state) {
    state.count++
  }
},
state: {
  count: 0
}

medium

A. count will be 0 immediately and 1 after 1 second

B. count will be 1 immediately

C. count will remain 0 forever

D. count will be 1 immediately and then reset to 0

Solution

1. Step 1: Understand the asynchronous action

   The action uses setTimeout to delay committing the mutation by 1 second.

2. Step 2: Trace the state changes

   Initially, count is 0. After 1 second, the increment mutation runs, increasing count to 1.

3. Final Answer:

   count will be 0 immediately and 1 after 1 second -> Option A

4. Quick Check:

   Async commit delays state change = A [OK]

Hint: Async actions delay mutations, state updates after delay [OK]

Common Mistakes:

• Assuming state changes immediately
• Confusing commit timing with dispatch timing
• Ignoring asynchronous delay

4. Identify the error in this Vuex action code snippet:

actions: {
  updateName({ commit }, newName) {
    commit('setName', newName)
  }
},
mutations: {
  setName(state, name) {
    state.name = name
  }
},
state: {
  name: ''
}

What is wrong if dispatching updateName does not update the state?

medium

A. The action should use dispatch instead of commit

B. The mutation setName is missing from the store

C. The action is missing the context parameter

D. The action is not properly registered or dispatched

Solution

1. Step 1: Check action and mutation code

   The action correctly commits the mutation with the new name, and the mutation updates the state.

2. Step 2: Consider why state doesn't update

   If dispatching the action doesn't update state, likely the action is not properly registered in the store or the dispatch call is incorrect.

3. Final Answer:

   The action is not properly registered or dispatched -> Option D

4. Quick Check:

   Unregistered or wrong dispatch causes no state update = A [OK]

Hint: Check action registration and dispatch call if state doesn't update [OK]

Common Mistakes:

• Using commit inside action is correct, not an error
• Assuming mutation is missing when it exists
• Confusing commit and dispatch roles

5. You want to create a Vuex action that fetches user data from an API and updates the state only if the user is active. Which of the following action implementations correctly applies this logic?

hard

A. async fetchUser({ commit }) {
const user = await fetch('/api/user').then(res => res.json())
commit('setUser', user)
}

B. fetchUser({ commit }) {
fetch('/api/user').then(res => res.json()).then(user => {
commit('setUser', user)
})
}

C. async fetchUser({ commit }) {
const user = await fetch('/api/user').then(res => res.json())
if (user.active) commit('setUser', user)
}

D. fetchUser({ commit }) {
const user = fetch('/api/user').then(res => res.json())
if (user.active) commit('setUser', user)
}

Solution

1. Step 1: Analyze async/await usage

   async fetchUser({ commit }) { const user = await fetch('/api/user').then(res => res.json()) if (user.active) commit('setUser', user) } correctly awaits the fetch call and then checks if the user is active before committing the mutation.

2. Step 2: Identify issues in other options

   fetchUser({ commit }) { fetch('/api/user').then(res => res.json()).then(user => { commit('setUser', user) }) } commits without checking active status. async fetchUser({ commit }) { const user = await fetch('/api/user').then(res => res.json()) commit('setUser', user) } commits without condition. fetchUser({ commit }) { const user = fetch('/api/user').then(res => res.json()) if (user.active) commit('setUser', user) } does not await fetch, so user is a Promise, causing errors.

3. Final Answer:

   async fetchUser({ commit }) { const user = await fetch('/api/user').then(res => res.json()) if (user.active) commit('setUser', user) } -> Option C

4. Quick Check:

   Await fetch and check condition before commit = C [OK]

Hint: Await fetch, check condition, then commit mutation [OK]

Common Mistakes:

• Not awaiting fetch causing Promise errors
• Committing without condition check
• Using then without proper chaining or condition