Vue Academy · Lesson

Mutations and Actions

Change state with mutations and async actions.

Lesson 2 of 313 steps

Mutations and Actions is a free Vue Academy lesson on CoddyKit. This is lesson 2 of 3. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 3 lessons in total.

Changing State Safely

In Vuex you never modify state directly from a component. Instead, all changes go through mutations. This single, explicit path makes every state change traceable and debuggable in Vue DevTools.

What Is a Mutation?

A mutation is a synchronous function that receives the current state and changes it. Mutations are the only place where state is allowed to be modified.

mutations: {
  increment(state) {
    state.count++
  }
}

Mutations Must Be Synchronous

Mutations must run synchronously. If you put async code (like a network call) inside a mutation, DevTools cannot track when the state actually changed, breaking time-travel debugging.

Committing a Mutation

To run a mutation you commit it by name from a component using this.$store.commit.

methods: {
  add() {
    this.$store.commit("increment")
  }
}

Passing a Payload

Mutations accept an extra argument called a payload, letting you pass data into the change.

mutations: {
  incrementBy(state, amount) {
    state.count += amount
  }
}

// commit with payload
this.$store.commit("incrementBy", 5)

Object-Style Payloads

For multiple values, pass an object payload. This is clearer and more flexible than positional arguments.

mutations: {
  setUser(state, payload) {
    state.user = { id: payload.id, name: payload.name }
  }
}

this.$store.commit("setUser", { id: 1, name: "Ada" })

What Is an Action?

An action handles asynchronous work and business logic. Actions do not change state themselves; instead they commit mutations. This keeps async code separate from the actual state mutation.

Defining an Action

An action receives a context object. From it you can commit mutations or access state.

actions: {
  async fetchUser(context, userId) {
    const res = await fetch("/api/users/" + userId)
    const data = await res.json()
    context.commit("setUser", data)
  }
}

Destructuring the Context

It is common to destructure commit directly from the context for brevity.

actions: {
  async loadTodos({ commit }) {
    commit("setLoading", true)
    const res = await fetch("/api/todos")
    commit("setTodos", await res.json())
    commit("setLoading", false)
  }
}

Dispatching an Action

Components trigger actions with this.$store.dispatch, passing an optional payload. Dispatch returns a promise for async actions.

methods: {
  async load() {
    await this.$store.dispatch("loadTodos")
  }
}

The Full Flow

The complete cycle is: a component dispatches an action, the action does async work and commits a mutation, and the mutation changes state. The reactive state then updates the UI automatically.

Quick Check

Test your knowledge of mutations and actions.

Answer it in the interactive lesson

Recap

State changes only through mutations, which are synchronous and committed with commit. Asynchronous logic lives in actions, dispatched with dispatch, which commit mutations when ready. Both accept payloads to pass data. Next you will add getters and split the store into modules.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 42
Lessons: 156

Start learning free View the full course

Frequently Asked Questions

Is the “Mutations and Actions” lesson free?

Yes — any 3 lessons of the Vue Academy learning path, including “Mutations and Actions”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 3 lessons in total.

What will I learn in “Mutations and Actions”?

Change state with mutations and async actions. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 3.

How long does the “Mutations and Actions” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy