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.