Getters for computed store values in Vue - Step-by-Step Execution

Concept Flow - Getters for computed store values

Define Store State

↓

Create Getter: compute value from state

↓

Component uses Getter

↓

Getter returns computed value

↓

Component updates reactively

The flow shows how a store state is defined, a getter computes a value from it, and components use this getter to get reactive computed values.

Execution Sample

Vue

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => ({ count: 2 }),
  getters: {
    doubleCount: (state) => state.count * 2
  }
})

Defines a Pinia store with a state 'count' and a getter 'doubleCount' that returns twice the count.

Execution Table

Step	Action	State.count	Getter doubleCount	Component Output
1	Initialize store	2	Computed as 2 * 2	4
2	Component reads doubleCount	2	4	4 displayed
3	Update state.count = 3	3	Computed as 3 * 2	6
4	Component reacts to getter change	3	6	6 displayed
5	Update state.count = 5	5	Computed as 5 * 2	10
6	Component reacts to getter change	5	10	10 displayed
7	No more updates	5	10	10 displayed

💡 No more state changes; component shows latest computed getter value.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
state.count	2	2	3	5	5
getter.doubleCount	4	4	6	10	10
component output	4	4	6	10	10

Key Moments - 2 Insights

Why does the component update automatically when state.count changes?

Because the getter is reactive and computed from state.count, when state.count changes (see execution_table steps 3 and 5), the getter recalculates and triggers the component to update (steps 4 and 6).

Is the getter a function or a value?

The getter acts like a computed property: it is defined as a function but accessed as a value. It recalculates automatically when its dependencies (state.count) change, as shown in the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table at step 3: what is the value of getter.doubleCount?

A 6

B 4

C 3

D 5

💡 Hint

Check the 'Getter doubleCount' column at step 3 in the execution_table.

At which step does the component first display the value 10?

A Step 5

B Step 6

C Step 4

D Step 7

💡 Hint

Look at the 'Component Output' column in the execution_table for when it changes to 10.

If state.count was updated to 4 instead of 3 at step 3, what would getter.doubleCount be then?

A 6

B 4

C 8

D 3

💡 Hint

Remember getter.doubleCount = state.count * 2, see execution_table logic.

Concept Snapshot

Getters in Vue stores compute values from state.
They act like computed properties.
When state changes, getters update automatically.
Components using getters reactively update.
Define getters as functions returning computed values.
Access getters like properties, not functions.

Full Transcript

This visual execution shows how Vue store getters work. First, the store state is defined with a count value. Then a getter called doubleCount computes twice the count. When the component reads doubleCount, it gets the computed value. If the state.count changes, the getter recalculates automatically. The component updates reactively to show the new computed value. This flow helps beginners see how getters provide reactive computed values from store state in Vue.