Extract Pinia Stores from Bloated Vue Components

If your Vue components are full of repetitive ref() declarations and inline fetch() calls, ask Claude to extract them into a proper Pinia store — it handles the refactor and updates the component in one go.

"This Vue component has 80+ lines of data fetching and local state.
Extract everything into a Pinia store:
- Move all refs and reactive state to the store's state()
- Convert fetch logic into store actions with loading/error states
- Add a $reset() action for testing
- Update the component to use storeToRefs() for reactivity
- Write Vitest tests that use createPinia() and mock the API calls"

Claude generates a typed store and rewrites the component to stay lean — it should only call store actions and render:

// store/useUsersStore.ts
export const useUsersStore = defineStore('users', () => {
  const users = ref<User[]>([])
  const loading = ref(false)
  const error = ref<string | null>(null)

  async function fetchUsers() { /* ... */ }
  function $reset() { users.value = []; error.value = null }

  return { users, loading, error, fetchUsers, $reset }
})

It also handles the subtle bits: resetting state between route navigations, preventing duplicate concurrent fetches with a guard, and setting up a storeToRefs() pattern so reactivity doesn't silently break when you destructure.

Fat components are a maintenance problem — Pinia stores keep your data layer testable and your templates readable.