Vue Academy · Lesson

Getters and Modules

Compute derived state and organize the store into modules.

Getters and Modules is a free Vue Academy lesson on CoddyKit — lesson 3 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.

Computed State with Getters

Sometimes you need derived state, like a filtered list or a count. A getter is the store equivalent of a computed property: it derives a value from state and caches the result until its dependencies change.

Defining a Getter

A getter is a function that receives state and returns a derived value.

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  }
}

Getters Using Other Getters

A getter receives a second argument with all other getters, so you can compose them.

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  },
  completedCount(state, getters) {
    return getters.completedTodos.length
  }
}

Accessing Getters

Read getters through this.$store.getters in a computed property.

computed: {
  doneCount() {
    return this.$store.getters.completedCount
  }
}

Method-Style Getters

Return a function from a getter to pass arguments. Note method-style getters are not cached and run on every call.

getters: {
  todoById: (state) => (id) => {
    return state.todos.find(t => t.id === id)
  }
}

// usage
this.$store.getters.todoById(3)

The mapGetters Helper

Like mapState, the mapGetters helper turns getters into computed properties automatically.

import { mapGetters } from "vuex"

export default {
  computed: {
    ...mapGetters(["completedTodos", "completedCount"])
  }
}

Why Split into Modules?

A single large store becomes hard to maintain. Vuex lets you split the store into modules, each with its own state, mutations, actions, and getters, keeping related logic together.

Defining a Module

A module is just an object with the same options as a store. You register modules under the modules key.

const cart = {
  state: () => ({ items: [] }),
  mutations: {
    addItem(state, item) { state.items.push(item) }
  },
  getters: {
    itemCount: (state) => state.items.length
  }
}

Registering Modules

Combine modules in the root store under modules. Each key becomes the module name.

import { createStore } from "vuex"
import cart from "./modules/cart"
import user from "./modules/user"

export const store = createStore({
  modules: { cart, user }
})

Namespacing Modules

Set namespaced: true so a module gets its own scope. This avoids naming clashes between modules and makes the structure explicit.

const cart = {
  namespaced: true,
  state: () => ({ items: [] }),
  getters: {
    itemCount: (state) => state.items.length
  }
}

Accessing Namespaced Modules

With namespacing, prefix the module name when committing, dispatching, or reading getters.

// module state lives under the module key
this.$store.state.cart.items

// namespaced getter, mutation, action
this.$store.getters["cart/itemCount"]
this.$store.commit("cart/addItem", item)
this.$store.dispatch("cart/checkout")

Quick Check

Test your knowledge of getters and modules.

Recap

Getters derive cached values from state, accessed via this.$store.getters or mapGetters. Modules split a large store into focused units; setting namespaced: true scopes them so you address members with a module/name prefix. You now have the full Vuex toolkit: state, mutations, actions, getters, and modules.

Frequently asked questions

Is the “Getters and Modules” lesson free?

Yes — the full text of “Getters and Modules” 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 “Getters and Modules”?

Compute derived state and organize the store into modules. 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 3 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Getters and Modules” 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