Vue Academy · Lesson

defineStore: State, Getters, Actions

Options store vs Setup store, state as function, computed getters, async actions.

defineStore: State, Getters, Actions is a free Vue Academy lesson on CoddyKit — lesson 2 of 4. 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 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The Three Pillars of a Store

An option store has three parts: state (the data), getters (derived values), and actions (methods that change state). You define all three inside defineStore.

Defining a Store

defineStore takes a unique id string and an options object. It returns a composable — by convention named useXxxStore.

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // state, getters, actions go here
})

State Is a Function

The state option must be a function returning an object. This guarantees each store instance gets a fresh state, just like data() in components.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Coddy' })
})

Reading State

Call the store composable inside setup to get an instance, then read state properties directly. They are reactive.

const counter = useCounterStore()
console.log(counter.count) // 0

Getters Are Computed Values

getters are like computed properties. Each receives the state as its first argument and returns a derived value. They are cached.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 2 }),
  getters: {
    doubled: (s) => s.count * 2
  }
})

Using a Getter

Access a getter like a property — no parentheses. Pinia recomputes it only when its dependencies change.

const counter = useCounterStore()
console.log(counter.doubled) // 4

Getters Referencing Other Getters

To use another getter, reference this instead of the state parameter. With this, do not use an arrow function.

getters: {
  doubled: (s) => s.count * 2,
  quadrupled() {
    return this.doubled * 2
  }
}

Actions Change State

actions are methods. They use this to read and mutate state directly. No commit, no dispatch — just call the method.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ },
    addBy(amount) { this.count += amount }
  }
})

Async Actions

Actions can be async. This is the place for API calls — fetch data, then assign the result to state.

actions: {
  async loadUser(id) {
    const res = await fetch('/api/users/' + id)
    this.user = await res.json()
  }
}

Using the Store in a Component

Import the composable, call it in <script setup>, and use state, getters, and actions in the template.

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

<template>
  <p>{{ counter.count }} -> {{ counter.doubled }}</p>
  <button @click="counter.increment()">+</button>
</template>

Patching Multiple Fields

To change several state fields at once, use $patch. It groups the changes into a single devtools entry.

counter.$patch({ count: 10, name: 'New' })

Quick Check

Test your knowledge of option store structure.

Recap

An option store has three parts:

state: a function returning the data object.
getters: cached derived values, receive state (or use this).
actions: methods that mutate state directly via this.

Use the store by calling its composable inside setup.

Frequently asked questions

Is the “defineStore: State, Getters, Actions” lesson free?

Yes — the full text of “defineStore: State, Getters, Actions” is free to read here on the web, and the Vue Academy course includes 4 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 “defineStore: State, Getters, Actions”?

Options store vs Setup store, state as function, computed getters, 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 4, so you can start here or from the beginning and move at your own pace.

How long does the “defineStore: State, Getters, 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