pinia

name	pinia
description	Pinia state management for Vue 3. Use defineStore() with Composition API style (setup stores). Covers store definition, state, getters, actions, TypeScript, store composition, SSR, and best practices.
license	MIT
metadata	{"author":"github.com/belos-street","version":"1.0.0"}

Pinia state management for Vue 3 using Composition API style stores.

Store Definition

• Defining stores with defineStore() → See define-store-composition-api
• Choosing between setup stores and options stores → See setup-vs-options-store
• Organizing store files and directory structure → See store-organization
• Using store composables in components → See store-in-components
• Creating reusable store patterns → See store-composition-patterns

State

• Mutating state directly vs using actions → See state-mutation-best-practices
• Resetting state to initial values → See state-reset-pattern
• Using reactive vs ref for state → See state-reactive-vs-ref
• State persistence with localStorage → See state-persistence
• Deep reactivity with nested objects → See state-deep-reactivity
• State hydration from API → See state-hydration

Getters

• Getters not caching computed values → See getter-computed-caching
• Passing arguments to getters → See getter-pass-arguments
• Accessing other store getters → See getter-cross-store-access
• Getter performance with expensive operations → See getter-performance-optimization

Actions

• Async actions and error handling → See action-async-error-handling
• Calling actions from other stores → See action-cross-store-calls
• Action composition and reusability → See action-composition-patterns
• Batch state updates in actions → See action-batch-updates
• Testing actions with mocked dependencies → See action-testing-strategies

TypeScript

• Typing store state with interfaces → See typescript-state-typing
• Typing getters and actions → See typescript-getters-actions-typing
• Using Pinia with TypeScript generics → See typescript-generic-stores
• Type-safe store composition → See typescript-store-composition
• Type inference for auto-imported stores → See typescript-auto-import-types

Store Composition

• Combining multiple stores → See store-composition
• Avoiding circular dependencies between stores → See store-circular-dependencies
• Shared state across stores → See store-shared-state
• Extracting common store logic → See store-logic-extraction

Best Practices

• Store size and performance → See store-performance-optimization
• When to use Pinia vs provide/inject → See pinia-vs-provide-inject
• Testing Pinia stores → See testing-pinia-stores
• Migrating from Vuex to Pinia → See migrating-from-vuex

Quick Reference

Basic Setup Store (Composition API)

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  
  function increment() {
    count.value++
  }
  
  function $reset() {
    count.value = 0
  }
  
  return { count, doubleCount, increment, $reset }
})

Using Store in Component

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()
</script>

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double: {{ counter.doubleCount }}</p>
    <button @click="counter.increment">Increment</button>
  </div>
</template>

Store with TypeScript

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

interface User {
  id: number
  name: string
  email: string
}

export const useUserStore = defineStore('user', () => {
  const user = ref<User | null>(null)
  const isAuthenticated = computed(() => user.value !== null)
  
  async function login(email: string, password: string) {
    const response = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ email, password })
    })
    user.value = await response.json()
  }
  
  function logout() {
    user.value = null
  }
  
  return { user, isAuthenticated, login, logout }
})

Store Composition

import { defineStore } from 'pinia'
import { ref } from 'vue'
import { useAuthStore } from './auth'
import { useCartStore } from './cart'

export const useCheckoutStore = defineStore('checkout', () => {
  const authStore = useAuthStore()
  const cartStore = useCartStore()
  
  const isProcessing = ref(false)
  
  async function checkout() {
    if (!authStore.isAuthenticated) {
      throw new Error('User not authenticated')
    }
    
    isProcessing.value = true
    try {
      await processPayment(cartStore.items)
      cartStore.clear()
    } finally {
      isProcessing.value = false
    }
  }
  
  return { isProcessing, checkout }
})

Key Imports

// Core
import { defineStore } from 'pinia'
import { createPinia } from 'pinia'

// Vue Composition API (used in setup stores)
import { ref, reactive, computed, watch } from 'vue'

// Store instance
import { storeToRefs } from 'pinia'

// Type utilities
import type { StoreDefinition } from 'pinia'

Installation

npm install pinia
# or
yarn add pinia
# or
pnpm add pinia

Setup in main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')