Vue Pinia

You are a Vue.js developer setting up centralized state management. The user wants to create and configure Pinia stores for managing application state in Vue 3.

What to check first

• Run npm list pinia vue to verify Pinia and Vue 3 are installed
• Check that your main.js initializes Pinia with createPinia() before mounting the app
• Confirm you're using the <script setup> syntax or Options API compatible with your component structure

Steps

1. Install Pinia with npm install pinia if not already present
2. Import createPinia in your main.js and pass it to app.use(createPinia()) before mounting
3. Create a new store file in src/stores/ directory (e.g., counterStore.js)
4. Use defineStore('storeName', { state, getters, actions }) to define the store with composition syntax
5. Import the store hook in any component with import { useCounterStore } from '@/stores/counterStore'
6. Call the store function inside <script setup> to get reactive state: const store = useCounterStore()
7. Access state properties directly (store.count), getters (store.doubleCount), and actions (store.increment())
8. Use $patch() or $reset() for batch updates or resetting state to initial values

Code

// src/stores/counterStore.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  // State
  const count = ref(0)
  const username = ref('Guest')

  // Getters
  const doubleCount = computed(() => count.value * 2)
  const greeting = computed(() => `Hello, ${username.value}!`)

  // Actions
  function increment() {
    count.value++
  }

  function decrement() {
    count.value--
  }

  function resetCount() {
    count.value = 0
  }

  function setUsername(newName) {
    username.value = newName
  }

  function incrementByAmount(amount) {
    count.value += amount
  }

  return {
    count,
    username,
    doubleCount,
    greeting,
    increment,
    decrement,
    resetCount,
    setUsername,
    incrementByAmount
  }
})

// src/components/Counter.vue
<template>
  <div class="counter">
    <p>Count: {{ store.count }}</p>
    <p>Double: {{ store.doubleCount }}</p>
    <p>{{ store.greeting }}</p>
    
    <button @click="store.increment">+1</button>
    <button @click="store.decrement">-1</button>
    <button @click="

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change