VueHow-ToBeginner · 3 min read

How to Use Getters in Pinia for Vue State Management

In Pinia, you define getters inside your store to create computed properties based on the store's state. These getters behave like functions but are accessed as properties, allowing you to easily derive and reuse state values in your Vue components.

📐

Syntax

In Pinia, getters are defined as an object inside the store. Each getter is a function that receives the store's state as its first argument and returns a computed value. You access getters like properties, not like functions.

state: The current state of the store.
getter function: Returns a derived value based on state.
Access getters in components via store.getterName.

typescript

import { defineStore } from 'pinia'

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

💻

Example

This example shows a Pinia store with a count state and a doubleCount getter that returns twice the count. The Vue component uses this getter to display the doubled value reactively.

vue

import { createApp } from 'vue'
import { createPinia, defineStore } from 'pinia'

const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 5
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  }
})

const App = {
  template: `
    <div>
      <p>Count: {{ counter.count }}</p>
      <p>Double Count (getter): {{ counter.doubleCount }}</p>
      <button @click="counter.count++">Increment</button>
    </div>
  `,
  setup() {
    const counter = useCounterStore()
    return { counter }
  }
}

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

Output

Count: 5 Double Count (getter): 10 [Clicking Increment increases Count and Double Count accordingly]

⚠️

Common Pitfalls

Common mistakes when using getters in Pinia include:

Trying to call getters as functions instead of accessing them as properties.
Mutating state inside getters, which should be pure and only compute values.
Not returning a value from the getter function.

Always remember getters are like computed properties, so avoid side effects.

typescript

/* Wrong: calling getter as a function */
const value = store.doubleCount // ❌ should be store.doubleCount

/* Wrong: mutating state inside getter */
getters: {
  badGetter: (state) => {
    state.count = 10 // ❌ don't change state here
    return state.count
  }
}

/* Right way */
getters: {
  goodGetter: (state) => state.count * 2
}

📊

Quick Reference

Concept	Description	Example
Getter Definition	Function inside `getters` that computes derived state	`doubleCount: (state) => state.count * 2`
Accessing Getter	Use as property, not function call	`store.doubleCount`
Getter Purity	Should not modify state or cause side effects	Return computed value only
Use in Components	Access via store instance in setup or template	`{{ store.doubleCount }}`

✅

Key Takeaways

Define getters in Pinia as functions inside the getters object that receive state and return computed values.

Access getters like properties, not by calling them as functions.

Getters should be pure and never modify the store state.

Use getters to keep your components clean by computing derived state inside the store.

Remember to import and use the Pinia store properly in your Vue components.