Scaffold Pinia Store

resources/js/stores/useFilterStore.ts

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useFilterStore = defineStore('filter', () => {
  const search = ref('')
  const sortBy = ref('name')
  const sortDirection = ref<'asc' | 'desc'>('asc')
  const perPage = ref(15)

  const hasActiveFilters = computed(() => {
    return search.value !== '' || sortBy.value !== 'name' || sortDirection.value !== 'asc'
  })

  function toggleSort(column: string) {
    if (sortBy.value === column) {
      sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc'
    } else {
      sortBy.value = column
      sortDirection.value = 'asc'
    }
  }

  function reset() {
    search.value = ''
    sortBy.value = 'name'
    sortDirection.value = 'asc'
    perPage.value = 15
  }

  return { search, sortBy, sortDirection, perPage, hasActiveFilters, toggleSort, reset }
})

Conventions

• Use setup syntax (composition API), not options syntax
• Store name follows use{Name}Store pattern
• Store ID (first arg to defineStore) is the camelCase name
• Only use Pinia for client-side state — server data comes through Inertia shared data
• Do not duplicate server state in stores
• Keep stores focused — one store per concern, not one mega-store