Vue Academy · Lesson

Mutations and Actions

Change state with mutations and async actions.

Mutations and Actions is a free Vue Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

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.

Frequently asked questions

Is the “Mutations and Actions” lesson free?

Yes — the full text of “Mutations and Actions” is free to read here on the web, and the Vue Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.

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