Vue Pinia

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

interface 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

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

Store Syntax Comparison:

// 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

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

Module 3: Getters & Computed

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

Module 4: Store Architecture

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

Architecture Patterns:

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

Module 5: Plugins & Persistence

Prerequisites: 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

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

Observability

tracking:
  - 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

import { 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

Skill("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