Generate Scalable Pinia Stores with TypeScript

Builds scalable, type-safe Pinia stores for Vue 3 state management using the Composition API setup() store syntax, following a single-responsibility rule (one store per domain), a clear separation between state, getters, and actions, and consistent naming (camelCase properties, descriptive action names). The recommended setup-store pattern exposes reactive ref state, computed getters (including a parameterized getter like userById(id)), async actions with try/catch/finally loading management, a filter-update action, and a $reset() method, returning readonly()-wrapped state and filters so components can't mutate them directly. It covers several advanced patterns: store composition (one store calling another, for example a posts store joining author data from a user store), optimistic updates (apply the change locally, then roll back to the original value if the API call fails), persistent state via useLocalStorage from @vueuse/core, and a generic loading/error-tracking store with a withLoadingAndError<T> wrapper that any async action can use.

Use it for Vue 3 applications standardizing on Pinia with setup()-style stores and TypeScript - domain-scoped stores that need typed state, memoized getters, optimistic UI updates, or persisted settings - rather than Options API stores or ad hoc component-local state.

Input is the domain or feature whose state needs managing. Output is a typed Pinia store: ref/computed/action definitions and a $reset() method, plus - where relevant - store composition, optimistic-update logic, useLocalStorage-backed persistence, or a shared loading/error wrapper. It also includes store tests using setActivePinia/createPinia in a beforeEach hook with mocked API calls.

Built on Pinia (defineStore, storeToRefs, $reset), Vue 3's Composition API (ref, computed, readonly, markRaw), @vueuse/core's useLocalStorage for persisted state, and TypeScript interfaces for store state, with tests written against Pinia's setActivePinia/createPinia test utilities.

For Vue 3 developers who want typed, testable stores rather than untyped Options API state. It also covers performance practices (readonly() on externally-exposed state, computed() memoization, markRaw() for large non-reactive objects, splitting stores as an app grows) and integration discipline (using storeToRefs() to keep destructured state reactive, defining TypeScript interfaces for all store state, and cleaning up store subscriptions rather than leaving them dangling).

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import type { User, UserFilters } from '@/types/user'

export const useUserStore = defineStore('user', () => {
  // State (reactive refs)
  const users = ref<User[]>([])
  const currentUser = ref<User | null>(null)
  const loading = ref(false)
  const filters = ref<UserFilters>({
    search: '',
    role: 'all',
    isActive: true
  })

  // Getters (computed)
  const filteredUsers = computed(() => {
    return users.value.filter(user => {
      const matchesSearch = user.name.toLowerCase().includes(filters.value.search.toLowerCase())
      const matchesRole = filters.value.role === 'all' || user.role === filters.value.role
      const matchesActive = !filters.value.isActive || user.isActive
      return matchesSearch && matchesRole && matchesActive
    })
  })

  const userById = computed(() => {
    return (id: string) => users.value.find(user => user.id === id)
  })

  // Actions
  async function fetchUsers() {
    loading.value = true
    try {
      const response = await userApi.getUsers()
      users.value = response.data
    } catch (error) {
      console.error('Failed to fetch users:', error)
      throw error
    } finally {
      loading.value = false
    }
  }

  async function createUser(userData: Omit<User, 'id'>) {
    const newUser = await userApi.createUser(userData)
    users.value.push(newUser)
    return newUser
  }

  function updateFilters(newFilters: Partial<UserFilters>) {
    filters.value = { ...filters.value, ...newFilters }
  }

  function $reset() {
    users.value = []
    currentUser.value = null
    loading.value = false
    filters.value = {
      search: '',
      role: 'all',
      isActive: true
    }
  }

  return {
    // State
    users: readonly(users),
    currentUser,
    loading: readonly(loading),
    filters: readonly(filters),
    // Getters
    filteredUsers,
    userById,
    // Actions
    fetchUsers,
    createUser,
    updateFilters,
    $reset
  }
})