Actions for modifying state in Vue - Step-by-Step Execution

Concept Flow - Actions for modifying state

User triggers action

↓

Action function runs

↓

Action commits mutation

↓

Mutation updates state

↓

State changes trigger reactivity

↓

UI updates to reflect new state

This flow shows how a user event triggers an action, which commits a mutation to update the state, causing the UI to reactively update.

Execution Sample

Vue

const store = useStore()

function increment() {
  store.dispatch('incrementCount')
}

// Action
const actions = {
  incrementCount({ commit }) { commit('increment') }
}

// Mutation
const mutations = {
  increment(state) { state.count++ }
}

This code shows a Vue action called 'incrementCount' that commits a mutation to increase a count in the state.

Execution Table

Step	Trigger	Action Called	Mutation Committed	State Before	State After	UI Update
1	User clicks button	incrementCount	increment	count: 0	count: 1	Count displayed updates to 1
2	User clicks button again	incrementCount	increment	count: 1	count: 2	Count displayed updates to 2
3	No more clicks	None	None	count: 2	count: 2	UI remains showing 2

💡 No more user actions, so no further state changes or UI updates.

Variable Tracker

Variable	Start	After 1	After 2	Final
count	0	1	2	2

Key Moments - 2 Insights

Why do we use an action instead of committing the mutation directly?

Actions allow asynchronous operations or complex logic before committing mutations, as shown in the execution_table where the action 'incrementCount' commits the mutation 'increment'.

Does the UI update immediately after the mutation?

Yes, after the mutation updates the state, Vue's reactivity system triggers the UI update, as seen in the 'UI Update' column of the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'count' after step 2?

A 1

B 2

C 0

D 3

💡 Hint

Check the 'State After' column in row 2 of the execution_table.

At which step does the UI first update to show the new count?

A Step 3

B Step 2

C Step 1

D No UI update occurs

💡 Hint

Look at the 'UI Update' column in the execution_table for when the count changes from 0 to 1.

If the action did not commit the mutation, what would happen to the state?

A State would remain unchanged

B State would increment anyway

C State would reset to zero

D State would cause an error

💡 Hint

Refer to the 'Mutation Committed' column in the execution_table; mutations change state.

Concept Snapshot

Actions in Vue are functions that handle logic and commit mutations.
Mutations directly change the state.
State changes trigger reactive UI updates.
Use actions for async or complex state changes.
UI updates happen after mutations run.

Full Transcript

In Vue, actions are functions that modify state by committing mutations. When a user triggers an action, the action runs and commits a mutation. The mutation updates the state, and Vue's reactivity system updates the UI automatically. This flow ensures state changes are tracked and UI stays in sync. Actions are useful for handling asynchronous tasks or complex logic before changing state. Mutations must be synchronous and directly update state. The example shows a count increment triggered by an action committing a mutation, updating the count and UI step-by-step.