---

name: vue-pinia description: Master Pinia State Management - Stores, Actions, Getters, Plugins, Persistence sasmp_version: "1.3.0" bonded_agent: 03-vue-pinia bond_type: PRIMARY_BOND version: "2.0.0" last_updated: "2025-01"

Vue Pinia Skill

Production-grade skill for mastering Pinia state management in Vue applications.

Purpose

Single Responsibility: Teach scalable state management patterns with Pinia including store design, actions, getters, plugins, and persistence strategies.

Parameter Schema

Copyinterface PiniaParams {
  topic: 'stores' | 'actions' | 'getters' | 'plugins' | 'persistence' | 'all';
  level: 'beginner' | 'intermediate' | 'advanced';
  context?: {
    app_size?: 'small' | 'medium' | 'large';
    existing_state?: string[];
  };
}

Learning Modules

Module 1: Store Fundamentals

CopyPrerequisites: vue-composition-api
Duration: 2-3 hours
Outcome: Create and use Pinia stores

Store Syntax Comparison:

Copy// Options Store
defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: { double: (s) => s.count * 2 },
  actions: { increment() { this.count++ } }
})

// Setup Store (Recommended)
defineStore('counter', () => {
  const count = ref(0)
  const double = computed(() => count.value * 2)
  function increment() { count.value++ }
  return { count, double, increment }
})

Module 2: Actions & Async

CopyPrerequisites: Module 1
Duration: 2-3 hours
Outcome: Handle async operations

Module 3: Getters & Computed

CopyPrerequisites: Module 2
Duration: 1-2 hours
Outcome: Derive and filter state

Module 4: Store Architecture

CopyPrerequisites: Modules 1-3
Duration: 3-4 hours
Outcome: Design scalable store structure

Architecture Patterns:

Copystores/
├── modules/
│   ├── useUserStore.ts      # User domain
│   ├── useProductStore.ts   # Product domain
│   └── useCartStore.ts      # Cart domain
├── shared/
│   └── useNotificationStore.ts
└── index.ts                  # Re-exports

Module 5: Plugins & Persistence

CopyPrerequisites: Modules 1-4
Duration: 2-3 hours
Outcome: Extend Pinia functionality

Validation Checkpoints

Beginner Checkpoint

• Create basic store with state
• Use storeToRefs in component
• Implement simple action
• Access getter value

Intermediate Checkpoint

• Build async action with loading/error
• Create parameterized getter
• Compose two stores together
• Add persistence plugin

Advanced Checkpoint

• Design normalized store structure
• Implement optimistic updates
• Create custom plugin
• Test stores in isolation

Retry Logic

Copyconst skillConfig = {
  maxAttempts: 3,
  backoffMs: [1000, 2000, 4000],
  onFailure: 'simplify_store_design'
}

Observability

Copytracking:
  - event: store_created
    data: [store_name, store_type]
  - event: pattern_applied
    data: [pattern_name, success]
  - event: skill_completed
    data: [stores_built, complexity]

Troubleshooting

Common Issues

Debug Steps

1. Check Pinia devtools for state
2. Verify store ID is unique
3. Confirm pinia plugin is installed
4. Check for circular store imports

Unit Test Template

Copyimport { describe, it, expect, beforeEach } from 'vitest'
import { setActivePinia, createPinia } from 'pinia'
import { useUserStore } from './useUserStore'

describe('useUserStore', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
  })

  it('initializes with null user', () => {
    const store = useUserStore()
    expect(store.user).toBeNull()
  })

  it('logs in user correctly', async () => {
    const store = useUserStore()
    await store.login({ email: 'test@example.com' })
    expect(store.isLoggedIn).toBe(true)
  })

  it('logs out and clears state', () => {
    const store = useUserStore()
    store.$patch({ user: { id: '1', name: 'Test' } })
    store.logout()
    expect(store.user).toBeNull()
  })
})

Usage

CopySkill("vue-pinia")

Related Skills

• vue-composition-api - Prerequisite
• vue-typescript - Typed stores
• vue-testing - Store testing

Resources

• Pinia Documentation
• Pinia Best Practices
• pinia-plugin-persistedstate