Pinia

Official Store with Pinia

Pinia is the official Vue store: simple API, TypeScript-friendly, DevTools support.

Define stores with defineStore and use them via useXStore().

import { defineStore } from 'pinia'
export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] }),
  getters: { count: s => s.items.length },
  actions: {
    add(item) { this.items.push(item) }
  }
})

Options-style Pinia store.

Setup Stores

Can use Composition style inside defineStore too.

• Prefer Composition API + script setup.
• Use computed for derived UI.
• Keep side effects intentional.
• Practice in a small Vite app.

Pinia Cheatsheet

Quick reference for patterns covered in this lesson.

storeToRefs

Destructure state/getters without losing reactivity.

Common Mistakes

• Destructuring store state without storeToRefs.
• Putting every transient toggle in Pinia.

Key Takeaways

• Pinia is important in Vue apps.
• Practice in SFCs.
• Prefer clear naming.
• Check Vue docs for details.