Actions

┌─────────────────────────────────────────────────────────────┐
│                        Pinia Store                           │
│                                                               │
│  ┌─────────┐                   ┌─────────────┐              │
│  │  State  │◀──────────────────│   Actions   │              │
│  │  (数据) │                   │  (方法)     │              │
│  └─────────┘                   └──────┬──────┘              │
│       ▲                               │                      │
│       │         修改状态              │                      │
│       │                               │                      │
│       │        ┌──────────────┐       │                      │
│       └────────│  Component  │◀──────┘                      │
│                │   调用      │                               │
│                └──────────────┘                               │
└─────────────────────────────────────────────────────────────┘

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    loading: false,
    error: null as string | null
  }),
  
  actions: {
    // ==================== 同步 Action ====================
    increment() {
      this.count++  // 直接修改 state
    },
    
    decrement() {
      this.count--
    },
    
    incrementBy(amount: number) {
      this.count += amount
    },
    
    reset() {
      this.count = 0
      this.error = null
    },
    
    // ==================== 异步 Action ====================
    async fetchCount() {
      this.loading = true
      this.error = null
      
      try {
        const response = await fetch('/api/count')
        const data = await response.json()
        this.count = data.value
      } catch (err) {
        this.error = err instanceof Error ? err.message : 'Unknown error'
      } finally {
        this.loading = false
      }
    }
  }
})

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

export const useCounterStore = defineStore('counter', () => {
  // ==================== State ====================
  const count = ref(0)
  const loading = ref(false)
  const error = ref<string | null>(null)
  
  // ==================== Actions ====================
  
  // 同步 Action
  function increment() {
    count.value++
  }
  
  function decrement() {
    count.value--
  }
  
  function incrementBy(amount: number) {
    count.value += amount
  }
  
  // 异步 Action
  async function fetchCount() {
    loading.value = true
    error.value = null
    
    try {
      const response = await fetch('/api/count')
      const data = await response.json()
      count.value = data.value
    } catch (err) {
      error.value = err instanceof Error ? err.message : 'Unknown error'
    } finally {
      loading.value = false
    }
  }
  
  return {
    count,
    loading,
    error,
    increment,
    decrement,
    incrementBy,
    fetchCount
  }
})

<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()

// 调用同步 action
counter.increment()
counter.incrementBy(5)

// 调用异步 action
async function handleFetch() {
  await counter.fetchCount()
  console.log('Fetched:', counter.count)
}

// 解构 actions
const { increment, decrement, reset } = counter
</script>

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="handleFetch">Fetch</button>
  </div>
</template>

const counter = useCounterStore()

// ✅ Actions 可以直接解构（无需 storeToRefs）
const { increment, decrement, fetchCount } = counter

// 直接调用
increment()
await fetchCount()

// ⚠️ State 需要使用 storeToRefs
const { count } = storeToRefs(counter)

// stores/user.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

interface User {
  id: number
  name: string
  email: string
}

interface LoginCredentials {
  email: string
  password: string
}

export const useUserStore = defineStore('user', () => {
  // State
  const user = ref<User | null>(null)
  const token = ref<string | null>(null)
  const loading = ref(false)
  const error = ref<string | null>(null)
  
  // Getters
  const isLoggedIn = computed(() => !!user.value && !!token.value)
  
  // ==================== 异步 Actions ====================
  
  async function login(credentials: LoginCredentials) {
    loading.value = true
    error.value = null
    
    try {
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(credentials)
      })
      
      if (!response.ok) {
        const data = await response.json()
        throw new Error(data.message || 'Login failed')
      }
      
      const data = await response.json()
      user.value = data.user
      token.value = data.token
      
      // 存储 token
      localStorage.setItem('auth-token', data.token)
      
      return true  // 返回成功标志
    } catch (err) {
      error.value = err instanceof Error ? err.message : 'Unknown error'
      return false
    } finally {
      loading.value = false
    }
  }
  
  async function logout() {
    try {
      await fetch('/api/auth/logout', {
        method: 'POST',
        headers: {
          Authorization: `Bearer ${token.value}`
        }
      })
    } finally {
      // 无论请求成功与否，都清除本地状态
      user.value = null
      token.value = null
      localStorage.removeItem('auth-token')
    }
  }
  
  async function fetchProfile() {
    if (!token.value) return
    
    loading.value = true
    error.value = null
    
    try {
      const response = await fetch('/api/user/profile', {
        headers: {
          Authorization: `Bearer ${token.value}`
        }
      })
      
      if (!response.ok) {
        if (response.status === 401) {
          // Token 过期，自动登出
          logout()
          return
        }
        throw new Error('Failed to fetch profile')
      }
      
      user.value = await response.json()
    } catch (err) {
      error.value = err instanceof Error ? err.message : 'Unknown error'
    } finally {
      loading.value = false
    }
  }
  
  async function updateProfile(updates: Partial<User>) {
    if (!user.value || !token.value) return
    
    loading.value = true
    error.value = null
    
    try {
      const response = await fetch('/api/user/profile', {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token.value}`
        },
        body: JSON.stringify(updates)
      })
      
      if (!response.ok) {
        throw new Error('Failed to update profile')
      }
      
      user.value = { ...user.value, ...updates }
      return true
    } catch (err) {
      error.value = err instanceof Error ? err.message : 'Unknown error'
      return false
    } finally {
      loading.value = false
    }
  }
  
  // 初始化：检查本地存储的 token
  function init() {
    const savedToken = localStorage.getItem('auth-token')
    if (savedToken) {
      token.value = savedToken
      fetchProfile()
    }
  }
  
  return {
    user,
    token,
    loading,
    error,
    isLoggedIn,
    login,
    logout,
    fetchProfile,
    updateProfile,
    init
  }
})

<script setup>
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { ref } from 'vue'

const userStore = useUserStore()
const router = useRouter()

const email = ref('')
const password = ref('')
const submitting = ref(false)

async function handleLogin() {
  submitting.value = true
  
  const success = await userStore.login({
    email: email.value,
    password: password.value
  })
  
  submitting.value = false
  
  if (success) {
    router.push('/dashboard')
  } else {
    alert(userStore.error)
  }
}
</script>

// stores/cart.ts
import { defineStore } from 'pinia'
import { useUserStore } from './user'
import { useProductStore } from './product'

export const useCartStore = defineStore('cart', () => {
  const items = ref<CartItem[]>([])
  
  // 获取其他 Store 实例
  const userStore = useUserStore()
  const productStore = useProductStore()
  
  async function addToCart(productId: number, quantity: number = 1) {
    // 检查登录状态
    if (!userStore.isLoggedIn) {
      throw new Error('Please login first')
    }
    
    // 获取商品信息
    const product = productStore.getProductById(productId)
    if (!product) {
      throw new Error('Product not found')
    }
    
    // 检查库存
    if (product.stock < quantity) {
      throw new Error('Insufficient stock')
    }
    
    // 添加到购物车
    items.value.push({
      productId,
      quantity,
      price: product.price
    })
  }
  
  async function checkout() {
    if (!userStore.user) return
    
    // 调用 API 创建订单
    const order = await createOrder({
      userId: userStore.user.id,
      items: items.value
    })
    
    // 清空购物车
    items.value = []
    
    return order
  }
  
  return { items, addToCart, checkout }
})

// ❌ 错误：模块顶层导入可能导致循环依赖
import { useBStore } from './b'  // 危险！

export const useAStore = defineStore('a', () => {
  const bStore = useBStore()  // 可能在 b 未初始化时调用
})

// ✅ 正确：在 Action 内部导入
export const useAStore = defineStore('a', () => {
  function doSomething() {
    const bStore = useBStore()  // 延迟获取，确保 b 已初始化
    // ...
  }
  
  return { doSomething }
})

// stores/common.ts
import { defineStore } from 'pinia'
import { ref } from 'vue'

interface AsyncState<T> {
  data: T | null
  loading: boolean
  error: Error | null
}

// 创建通用的异步状态管理
function createAsyncState<T>(): AsyncState<T> {
  return {
    data: null,
    loading: false,
    error: null
  }
}

// 通用的异步操作包装器
function wrapAsyncAction<T, Args extends any[]>(
  state: AsyncState<T>,
  action: (...args: Args) => Promise<T>
) {
  return async (...args: Args): Promise<T | null> => {
    state.loading = true
    state.error = null
    
    try {
      const result = await action(...args)
      state.data = result
      return result
    } catch (err) {
      state.error = err instanceof Error ? err : new Error(String(err))
      return null
    } finally {
      state.loading = false
    }
  }
}

// stores/posts.ts
import { defineStore } from 'pinia'
import { ref } from 'vue'

interface Post {
  id: number
  title: string
  content: string
}

export const usePostsStore = defineStore('posts', () => {
  const posts = ref<Post[]>([])
  const loading = ref(false)
  const error = ref<AppError | null>(null)
  
  // 错误处理辅助函数
  function handleError(err: unknown, message: string) {
    console.error(message, err)
    error.value = {
      message: err instanceof Error ? err.message : message,
      timestamp: Date.now()
    }
  }
  
  // 清除错误
  function clearError() {
    error.value = null
  }
  
  async function fetchPosts() {
    loading.value = true
    clearError()
    
    try {
      const response = await fetch('/api/posts')
      
      if (!response.ok) {
        throw new ApiError(
          `HTTP ${response.status}`,
          response.status
        )
      }
      
      posts.value = await response.json()
    } catch (err) {
      handleError(err, 'Failed to fetch posts')
    } finally {
      loading.value = false
    }
  }
  
  async function createPost(post: Omit<Post, 'id'>) {
    loading.value = true
    clearError()
    
    try {
      const response = await fetch('/api/posts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(post)
      })
      
      if (!response.ok) {
        throw new ApiError(
          `HTTP ${response.status}`,
          response.status
        )
      }
      
      const newPost = await response.json()
      posts.value.push(newPost)
      return newPost
    } catch (err) {
      handleError(err, 'Failed to create post')
      return null
    } finally {
      loading.value = false
    }
  }
  
  return {
    posts,
    loading,
    error,
    fetchPosts,
    createPost,
    clearError
  }
})

// 自定义错误类型
class ApiError extends Error {
  constructor(
    message: string,
    public statusCode: number
  ) {
    super(message)
    this.name = 'ApiError'
  }
}

interface AppError {
  message: string
  timestamp: number
}

const counter = useCounterStore()

// 订阅所有 action 调用
const unsubscribe = counter.$onAction(
  ({
    name,       // action 名称
    store,      // store 实例
    args,       // action 参数
    after,      // action 成功后的钩子
    onError     // action 出错时的钩子
  }) => {
    console.log(`Action "${name}" called with args:`, args)
    
    // Action 成功完成后执行
    after((result) => {
      console.log(`Action "${name}" finished with result:`, result)
    })
    
    // Action 出错时执行
    onError((error) => {
      console.error(`Action "${name}" failed:`, error)
    })
  }
)

// 取消订阅
unsubscribe()

// 场景1：日志记录
counter.$onAction(({ name, args }) => {
  console.log(`[${new Date().toISOString()}] ${name}`, args)
  // 发送到日志服务
  analytics.track('action', { name, args })
})

// 场景2：性能监控
counter.$onAction(({ name, after }) => {
  const startTime = performance.now()
  
  after(() => {
    const duration = performance.now() - startTime
    console.log(`${name} took ${duration.toFixed(2)}ms`)
  })
})

// 场景3：全局错误处理
counter.$onAction(({ name, onError }) => {
  onError((error) => {
    // 显示错误通知
    notificationStore.show({
      type: 'error',
      message: `Action ${name} failed: ${error.message}`
    })
  })
})

<script setup>
import { useCounterStore } from '@/stores/counter'
import { onUnmounted } from 'vue'

const counter = useCounterStore()

// 订阅 actions
const unsubscribe = counter.$onAction(({ name, after, onError }) => {
  if (name === 'fetchCount') {
    after(() => {
      console.log('Count fetched!')
    })
    
    onError((error) => {
      alert('Failed to fetch count: ' + error.message)
    })
  }
})

// 组件卸载时取消订阅
onUnmounted(() => {
  unsubscribe()
})
</script>

// stores/products.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

interface Product {
  id: number
  name: string
  description: string
  price: number
  stock: number
  category: string
  images: string[]
}

interface ProductFilters {
  category: string | null
  minPrice: number | null
  maxPrice: number | null
  inStock: boolean
  searchQuery: string
}

export const useProductStore = defineStore('products', () => {
  // ==================== State ====================
  const products = ref<Product[]>([])
  const filters = ref<ProductFilters>({
    category: null,
    minPrice: null,
    maxPrice: null,
    inStock: false,
    searchQuery: ''
  })
  const loading = ref(false)
  const error = ref<string | null>(null)
  const lastFetchTime = ref<number | null>(null)
  
  // ==================== Getters ====================
  const filteredProducts = computed(() => {
    let result = products.value
    
    const { category, minPrice, maxPrice, inStock, searchQuery } = filters.value
    
    // 分类筛选
    if (category) {
      result = result.filter(p => p.category === category)
    }
    
    // 价格筛选
    if (minPrice !== null) {
      result = result.filter(p => p.price >= minPrice)
    }
    if (maxPrice !== null) {
      result = result.filter(p => p.price <= maxPrice)
    }
    
    // 库存筛选
    if (inStock) {
      result = result.filter(p => p.stock > 0)
    }
    
    // 搜索
    if (searchQuery) {
      const query = searchQuery.toLowerCase()
      result = result.filter(p => 
        p.name.toLowerCase().includes(query) ||
        p.description.toLowerCase().includes(query)
      )
    }
    
    return result
  })
  
  const categories = computed(() => 
    [...new Set(products.value.map(p => p.category))]
  )
  
  const getProductById = computed(() => 
    (id: number) => products.value.find(p => p.id === id)
  )
  
  const totalProducts = computed(() => products.value.length)
  
  // ==================== Actions ====================
  
  // 获取商品列表
  async function fetchProducts(forceRefresh = false) {
    // 检查是否需要刷新（5分钟缓存）
    const cacheTime = 5 * 60 * 1000
    if (
      !forceRefresh &&
      lastFetchTime.value &&
      Date.now() - lastFetchTime.value < cacheTime
    ) {
      return
    }
    
    loading.value = true
    error.value = null
    
    try {
      const response = await fetch('/api/products')
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`)
      }
      
      products.value = await response.json()
      lastFetchTime.value = Date.now()
    } catch (err) {
      error.value = err instanceof Error ? err.message : 'Failed to fetch products'
    } finally {
      loading.value = false
    }
  }
  
  // 获取单个商品
  async function fetchProduct(id: number) {
    // 先检查本地缓存
    const cached = products.value.find(p => p.id === id)
    if (cached) return cached
    
    loading.value = true
    error.value = null
    
    try {
      const response = await fetch(`/api/products/${id}`)
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`)
      }
      
      const product = await response.json()
      
      // 更新本地缓存
      const index = products.value.findIndex(p => p.id === id)
      if (index > -1) {
        products.value[index] = product
      } else {
        products.value.push(product)
      }
      
      return product
    } catch (err) {
      error.value = err instanceof Error ? err.message : 'Failed to fetch product'
      return null
    } finally {
      loading.value = false
    }
  }
  
  // 更新筛选条件
  function updateFilters(newFilters: Partial<ProductFilters>) {
    filters.value = { ...filters.value, ...newFilters }
  }
  
  // 重置筛选条件
  function resetFilters() {
    filters.value = {
      category: null,
      minPrice: null,
      maxPrice: null,
      inStock: false,
      searchQuery: ''
    }
  }
  
  // 搜索商品
  function search(query: string) {
    updateFilters({ searchQuery: query })
  }
  
  // 更新库存
  async function updateStock(id: number, quantity: number) {
    const product = products.value.find(p => p.id === id)
    if (!product) return false
    
    try {
      const response = await fetch(`/api/products/${id}/stock`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ quantity })
      })
      
      if (!response.ok) {
        throw new Error('Failed to update stock')
      }
      
      product.stock = quantity
      return true
    } catch (err) {
      error.value = err instanceof Error ? err.message : 'Failed to update stock'
      return false
    }
  }
  
  return {
    // State
    products,
    filters,
    loading,
    error,
    // Getters
    filteredProducts,
    categories,
    getProductById,
    totalProducts,
    // Actions
    fetchProducts,
    fetchProduct,
    updateFilters,
    resetFilters,
    search,
    updateStock
  }
})

// ✅ 可以返回值
async function fetchUser(id: number) {
  const response = await fetch(`/api/users/${id}`)
  return response.json()  // 返回 Promise<User>
}

// 使用
const user = await userStore.fetchUser(1)

// Option Store
actions: {
  checkout() {
    if (!this.isLoggedIn) {  // 访问 getter
      throw new Error('Not logged in')
    }
    // ...
  }
}

// Setup Store
const isLoggedIn = computed(() => !!user.value)

async function checkout() {
  if (!isLoggedIn.value) {  // 直接访问
    throw new Error('Not logged in')
  }
}

// 使用 Promise.all
async function initialize() {
  await Promise.all([
    userStore.fetchProfile(),
    cartStore.fetchItems(),
    productStore.fetchProducts()
  ])
}

// 或者顺序执行
async function checkout() {
  await cartStore.validateItems()
  await paymentStore.process()
  await orderStore.create()
  cartStore.clear()
}

// Pinia 源码简化 — Action 订阅机制的内部实现
type ActionCallback = (context: {
  name: string
  store: any
  args: any[]
  after: (callback: (result: any) => void) => void
  onError: (callback: (error: unknown) => void) => void
}) => void

class ActionSubscriberQueue {
  private _subscriptions: ActionCallback[] = []

  subscribe(callback: ActionCallback): () => void {
    this._subscriptions.push(callback)
    return () => {
      const idx = this._subscriptions.indexOf(callback)
      if (idx > -1) this._subscriptions.splice(idx, 1)
    }
  }

  notify(context: {
    name: string
    store: any
    args: any[]
    afterCallbacks: Array<(result: any) => void>
    errorCallbacks: Array<(error: unknown) => void>
  }): void {
    for (const subs of this._subscriptions) {
      subs({
        name: context.name,
        store: context.store,
        args: context.args,
        after: (fn) => {
          context.afterCallbacks.push(fn)
        },
        onError: (fn) => {
          context.errorCallbacks.push(fn)
        },
      })
    }
  }
}

// $onAction 在 store 初始化时的绑定
// 每个 store 实例维护自己独立的订阅者队列
const subscriberQueue = new ActionSubscriberQueue()
store.$onAction = (callback: ActionCallback) =>
  subscriberQueue.subscribe(callback)

// Option Store 中 this 的绑定原理（简化）
function createOptionStore(options) {
  const store = reactive({})
  const actions = options.actions || {}

  // Pinia 内部将 actions 中的每个方法重新绑定到 store 实例
  const wrappedActions: Record<string, Function> = {}
  for (const key of Object.keys(actions)) {
    const originalAction = actions[key]
    wrappedActions[key] = function (...args: any[]) {
      // this 被绑定为 store 实例本身（reactive 代理）
      // 因此可以直接通过 this.xxx 访问 state/getter/其他 action
      return originalAction.apply(store, args)
    }
  }

  Object.assign(store, wrappedActions)
  return store
}

外部调用 store.increment()
  → options.actions.increment.apply(store, args)
    → 函数内部 this.count++ 等价于 store.count++
      → 触发响应式更新

// Setup Store 的闭包实现原理
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)

  // increment 是一个闭包，捕获了 count 变量
  function increment() {
    count.value++ // 闭包直接引用 ref 对象
  }

  // Pinia 将返回对象中的函数注册为 actions
  // 此时 increment 内部引用依然是定义时的 count ref
  return { count, increment }
})

用户调用 store.increment()
         │
         ▼
┌──────────────────────────┐
│ 1. 参数收集              │ 记录 action name 和 args
│    wrappedAction(args)   │
└─────────┬────────────────┘
          │
          ▼
┌──────────────────────────┐
│ 2. 订阅者通知 (before)   │ 遍历所有 $onAction 订阅者
│    subscriber.notify()   │ 收集 afterCallbacks / errorCallbacks
└─────────┬────────────────┘
          │
          ▼
┌──────────────────────────┐
│ 3. 原始 Action 执行      │ action.apply(store, args)
│    originalAction()      │ 运行用户定义的业务逻辑
└─────────┬────────────────┘
          │
     ┌────┴────┐
     │ result   │ error
     ▼          ▼
┌─────────┐ ┌─────────────┐
│4a.after │ │4b. onError  │ 遍历执行收集到的回调
│callbacks│ │ callbacks   │
└────┬────┘ └──────┬──────┘
     │             │
     └──────┬──────┘
            ▼
┌──────────────────────────┐
│ 5. $subscribe 通知       │ state 变更触发 watcher
│    (如 State 被修改)      │ 通知组件重新渲染
└──────────────────────────┘

function wrapAction(
  store: any,
  name: string,
  action: (...args: any[]) => any,
  activeSubscribers: ActionCallback[]
): (...args: any[]) => any {
  return function (...args: any[]) {
    const afterCallbacks: Array<(result: any) => void> = []
    const errorCallbacks: Array<(error: unknown) => void> = []

    // Step 2: 通知所有订阅者
    for (const sub of activeSubscribers) {
      sub({
        name,
        store,
        args,
        after: (fn) => afterCallbacks.push(fn),
        onError: (fn) => errorCallbacks.push(fn),
      })
    }

    // Step 3 & 4: 执行 + 错误捕获
    try {
      const result = action.apply(store, args)

      // 处理异步结果
      if (result instanceof Promise) {
        return result
          .then((resolved) => {
            for (const afterFn of afterCallbacks) {
              afterFn(resolved)
            }
            return resolved
          })
          .catch((err) => {
            for (const errorFn of errorCallbacks) {
              errorFn(err)
            }
            throw err
          })
      }

      // 同步结果
      for (const afterFn of afterCallbacks) {
        afterFn(result)
      }
      return result
    } catch (error) {
      for (const errorFn of errorCallbacks) {
        errorFn(error)
      }
      throw error // 重新抛出，保持原始行为
    }
  }
}

// composables/useOptimisticAction.ts
import { type Ref, ref, watch } from 'vue'

interface OptimisticConfig<TData, TPayload> {
  /** 乐观应用的更新 */
  apply: (current: TData, payload: TPayload) => TData

  /** 回滚函数 —— 如果服务端请求失败 */
  rollback: (current: TData, payload: TPayload) => TData

  /** 确认请求 */
  request: (payload: TPayload) => Promise<TData>
}

interface OptimisticResult<TData, TPayload> {
  execute: (payload: TPayload) => Promise<TData>
  isPending: Ref<boolean>
  error: Ref<Error | null>
}

function useOptimisticAction<TData, TPayload>(
  data: Ref<TData>,
  config: OptimisticConfig<TData, TPayload>
): OptimisticResult<TData, TPayload> {
  const isPending = ref(false)
  const error = ref<Error | null>(null)
  const previousData = ref<TData | null>(null)

  async function execute(payload: TPayload): Promise<TData> {
    isPending.value = true
    error.value = null

    // 保存快照用于回滚
    previousData.value = structuredClone(
      JSON.parse(JSON.stringify(data.value))
    ) as TData

    // 立即乐观更新
    data.value = config.apply(data.value, payload)

    try {
      const serverResult = await config.request(payload)
      // 用服务端返回值覆盖
      data.value = serverResult
      return serverResult
    } catch (err) {
      // 回滚到更新前状态
      if (previousData.value !== null) {
        data.value = config.rollback(
          previousData.value,
          payload
        )
      }
      error.value = err instanceof Error ? err : new Error(String(err))
      throw err
    } finally {
      isPending.value = false
      previousData.value = null
    }
  }

  return { execute, isPending, error }
}

// stores/todo.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

interface Todo {
  id: string
  text: string
  completed: boolean
  version: number
}

export const useTodoStore = defineStore('todo', () => {
  const todos = ref<Todo[]>([])

  const optimisticToggle = useOptimisticAction(todos, {
    apply(todos, id: string) {
      return todos.map((t) =>
        t.id === id ? { ...t, completed: !t.completed } : t
      )
    },
    rollback(todos, id: string) {
      return todos.map((t) =>
        t.id === id ? { ...t, completed: !t.completed } : t
      )
    },
    async request(id: string) {
      const res = await fetch(`/api/todos/${id}/toggle`, {
        method: 'PATCH',
      })
      if (!res.ok) throw new Error(`Toggle failed for todo ${id}`)
      return res.json() as Promise<Todo[]>
    },
  })

  return {
    todos,
    toggleTodo: optimisticToggle.execute,
    isToggling: optimisticToggle.isPending,
    toggleError: optimisticToggle.error,
  }
})

// utils/actionWithRetry.ts
interface RetryConfig {
  /** 最大重试次数 */
  maxRetries: number

  /** 重试间隔（毫秒），可接受上一次延迟返回下一次延迟 */
  retryDelay: number | ((attempt: number) => number)

  /** 超时时间（毫秒） */
  timeout: number

  /** 判断哪些错误应该重试 */
  shouldRetry?: (error: unknown) => boolean
}

class ActionTimeoutError extends Error {
  constructor(actionName: string, timeoutMs: number) {
    super(`Action "${actionName}" timed out after ${timeoutMs}ms`)
    this.name = 'ActionTimeoutError'
  }
}

class ActionMaxRetriesError extends Error {
  constructor(actionName: string, maxRetries: number, cause: unknown) {
    super(
      `Action "${actionName}" failed after ${maxRetries} retries: ${String(cause)}`
    )
    this.name = 'ActionMaxRetriesError'
  }
}

function withTimeout<T>(
  promise: Promise<T>,
  timeoutMs: number,
  actionName: string
): Promise<T> {
  if (timeoutMs <= 0) return promise

  return Promise.race([
    promise,
    new Promise<T>((_, reject) =>
      setTimeout(
        () => reject(new ActionTimeoutError(actionName, timeoutMs)),
        timeoutMs
      )
    ),
  ])
}

async function withRetry<T>(
  actionFn: () => Promise<T>,
  config: RetryConfig,
  actionName: string = 'anonymous'
): Promise<T> {
  const { maxRetries, retryDelay, timeout, shouldRetry } = config
  let lastError: unknown

  for (let attempt = 0; attempt <= maxRetries; attempt++) {
    try {
      const result = await withTimeout(actionFn(), timeout, actionName)
      return result
    } catch (error) {
      lastError = error

      // 超时错误可以重试
      if (error instanceof ActionTimeoutError && attempt < maxRetries) {
        const delay =
          typeof retryDelay === 'function'
            ? retryDelay(attempt)
            : retryDelay
        console.warn(
          `[${actionName}] Attempt ${attempt + 1} timed out, retrying in ${delay}ms`
        )
        await new Promise((resolve) => setTimeout(resolve, delay))
        continue
      }

      // 根据自定义规则判断是否重试
      if (
        shouldRetry &&
        shouldRetry(error) &&
        attempt < maxRetries
      ) {
        const delay =
          typeof retryDelay === 'function'
            ? retryDelay(attempt)
            : retryDelay
        await new Promise((resolve) => setTimeout(resolve, delay))
        continue
      }

      // 不可重试或达到最大次数
      if (attempt >= maxRetries) {
        throw new ActionMaxRetriesError(
          actionName,
          maxRetries,
          lastError
        )
      }
      throw error
    }
  }

  throw new ActionMaxRetriesError(actionName, maxRetries, lastError)
}

// 封装为一个 Store 增强工具
function createRetryableAction<TArgs extends any[], TResult>(
  actionFn: (...args: TArgs) => Promise<TResult>,
  config: Partial<RetryConfig> & { actionName: string }
): (...args: TArgs) => Promise<TResult> {
  const fullConfig: RetryConfig = {
    maxRetries: config.maxRetries ?? 3,
    retryDelay: config.retryDelay ?? ((n) => Math.pow(2, n) * 1000), // 指数退避
    timeout: config.timeout ?? 10000,
    shouldRetry: config.shouldRetry ?? (() => true),
  }

  return async (...args: TArgs): Promise<TResult> => {
    return withRetry(() => actionFn(...args), fullConfig, config.actionName)
  }
}

// stores/search.ts
export const useSearchStore = defineStore('search', () => {
  const results = ref<SearchResult[]>([])
  const loading = ref(false)

  const search = createRetryableAction(
    async (query: string) => {
      loading.value = true
      try {
        const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`)
        if (!res.ok) throw new Error(`Search failed: ${res.status}`)
        const data = await res.json()
        results.value = data
        return data
      } finally {
        loading.value = false
      }
    },
    {
      actionName: 'search',
      maxRetries: 3,
      retryDelay: (attempt) => Math.pow(2, attempt) * 1000, // 1s, 2s, 4s
      timeout: 5000,
      shouldRetry: (error) => {
        // 只重试网络 / 5xx 错误，不重试 4xx
        if (error instanceof TypeError) return true // 网络错误
        if ((error as any)?.status >= 500) return true
        return false
      },
    }
  )

  return { results, loading, search }
})

// composables/useAbortableAction.ts
interface AbortableAction<TResult> {
  execute: (...args: any[]) => Promise<TResult>
  abort: () => void
  pending: Ref<boolean>
}

function useAbortableAction<TResult>(
  fetchFn: (
    signal: AbortSignal,
    ...args: any[]
  ) => Promise<TResult>
): AbortableAction<TResult> {
  const pending = ref(false)
  let currentController: AbortController | null = null

  function abort() {
    if (currentController) {
      currentController.abort()
      currentController = null
      pending.value = false
    }
  }

  async function execute(...args: any[]): Promise<TResult> {
    // 取消上一次未完成的请求
    abort()

    const controller = new AbortController()
    currentController = controller
    pending.value = true

    try {
      const result = await fetchFn(controller.signal, ...args)
      return result
    } catch (err) {
      // 忽略 AbortError（取消触发的错误不是真正的错误）
      if (err instanceof DOMException && err.name === 'AbortError') {
        // 不抛出，静默忽略
        return undefined as unknown as TResult
      }
      throw err
    } finally {
      if (currentController === controller) {
        currentController = null
        pending.value = false
      }
    }
  }

  return { execute, abort, pending }
}

// stores/autocomplete.ts
export const useAutocompleteStore = defineStore('autocomplete', () => {
  const suggestions = ref<Suggestion[]>([])

  const searchAction = useAbortableAction<Suggestion[]>(
    async (signal, query: string) => {
      if (!query.trim()) {
        suggestions.value = []
        return []
      }
      const res = await fetch(
        `/api/suggestions?q=${encodeURIComponent(query)}`,
        { signal } // 将 AbortSignal 传入原生的 fetch
      )
      if (!res.ok) throw new Error(`Suggestion fetch failed`)
      const data = await res.json()
      suggestions.value = data
      return data
    }
  )

  return {
    suggestions,
    search: searchAction.execute,
    pending: searchAction.pending,
    abortSearch: searchAction.abort,
  }
})

<script setup lang="ts">
import { useAutocompleteStore } from '@/stores/autocomplete'
import { ref, watch } from 'vue'

const store = useAutocompleteStore()
const query = ref('')

// 输入变化时自动搜索，自动处理竞态条件
watch(query, (val) => {
  store.search(val)
})
</script>

// utils/actionCombinators.ts

/** 顺序执行多个 Action，任一失败则停止 */
async function sequential<T>(
  actions: Array<() => Promise<T>>
): Promise<T[]> {
  const results: T[] = []
  for (const action of actions) {
    results.push(await action())
  }
  return results
}

/** 带事务语义的顺序执行 —— 失败时回滚已执行的操作 */
async function transaction<T>(
  steps: Array<{
    execute: () => Promise<T>
    rollback: (result: T) => Promise<void>
  }>
): Promise<T[]> {
  const executed: { result: T; rollback: (r: T) => Promise<void> }[] = []

  try {
    for (const step of steps) {
      const result = await step.execute()
      executed.push({ result, rollback: step.rollback })
    }
    return executed.map((e) => e.result)
  } catch (err) {
    // 逆序回滚
    for (let i = executed.length - 1; i >= 0; i--) {
      try {
        await executed[i].rollback(executed[i].result)
      } catch (rbErr) {
        console.error(`Rollback step ${i} failed:`, rbErr)
      }
    }
    throw err
  }
}

/** 并行执行并汇总结果，支持并发限制 */
async function parallel<T>(
  actions: Array<() => Promise<T>>,
  concurrency: number = Infinity
): Promise<PromiseSettledResult<T>[]> {
  if (concurrency >= actions.length) {
    return Promise.allSettled(actions.map((a) => a()))
  }

  const results: PromiseSettledResult<T>[] = []
  const queue = [...actions]

  async function worker() {
    while (queue.length > 0) {
      const action = queue.shift()!
      try {
        const value = await action()
        results.push({ status: 'fulfilled', value })
      } catch (reason) {
        results.push({ status: 'rejected', reason })
      }
    }
  }

  // 启动并发 worker
  await Promise.all(
    Array.from({ length: concurrency }, () => worker())
  )
  return results
}

// stores/checkout.ts
export const useCheckoutStore = defineStore('checkout', () => {
  const cartStore = useCartStore()
  const inventoryStore = useInventoryStore()
  const orderStore = useOrderStore()

  async function checkout(): Promise<Order> {
    return transaction([
      {
        execute: () => inventoryStore.reserveItems(cartStore.items),
        rollback: (_) => inventoryStore.releaseItems(cartStore.items),
      },
      {
        execute: () => orderStore.createOrder(cartStore.items),
        rollback: (order) => orderStore.cancelOrder(order.id),
      },
      {
        execute: () => cartStore.clear(),
        rollback: () => cartStore.restore(cartStore.items),
      },
    ]).then((results) => results[1] as Order) // 返回创建的订单
  }

  return { checkout }
})

┌─────────────────────────────────────────────────────┐
│                    编排 Action 层                     │
│  组合多个 Store 的 Action，处理跨 Store 业务流程        │
│  例：checkout() = reserveInventory() + createOrder() │
├─────────────────────────────────────────────────────┤
│                    业务 Action 层                     │
│  封装特定业务规则和校验逻辑                             │
│  例：addToCart() 检查库存、检查登录、价格计算           │
├─────────────────────────────────────────────────────┤
│                    基础 Action 层                     │
│  直接的状态操作和 API 调用，不含业务判断                 │
│  例：setItems()、patchItem()、fetchRawProducts()      │
└─────────────────────────────────────────────────────┘

// stores/ecommerce/cart.store.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

interface CartItem {
  productId: string
  sku: string
  name: string
  price: number
  quantity: number
  maxQuantity: number
}

// ==================== 基础 Action 层 ====================
// 纯状态操作，无业务判断
function createBaseCartActions() {
  const items = ref<CartItem[]>([])

  function setItems(newItems: CartItem[]) {
    items.value = newItems
  }

  function addItem(item: CartItem) {
    items.value.push(item)
  }

  function removeItem(productId: string, sku: string) {
    const idx = items.value.findIndex(
      (i) => i.productId === productId && i.sku === sku
    )
    if (idx > -1) items.value.splice(idx, 1)
  }

  function updateQuantity(productId: string, sku: string, qty: number) {
    const item = items.value.find(
      (i) => i.productId === productId && i.sku === sku
    )
    if (item) item.quantity = qty
  }

  function clearAll() {
    items.value = []
  }

  return { items, setItems, addItem, removeItem, updateQuantity, clearAll }
}

// ==================== 业务 Action 层 ====================
// 封装业务校验逻辑
function createBusinessCartActions(
  base: ReturnType<typeof createBaseCartActions>
) {
  const error = ref<string | null>(null)

  function addToCart(
    product: {
      id: string
      sku: string
      name: string
      price: number
      stock: number
    },
    quantity: number
  ): boolean {
    error.value = null

    // 业务校验
    if (quantity <= 0) {
      error.value = '数量必须大于 0'
      return false
    }
    if (quantity > product.stock) {
      error.value = `库存不足，当前库存：${product.stock}`
      return false
    }
    if (quantity > 10) {
      error.value = '单次最多购买 10 件'
      return false
    }

    // 检查是否已在购物车
    const existing = base.items.value.find(
      (i) => i.productId === product.id && i.sku === product.sku
    )
    if (existing) {
      const newQty = existing.quantity + quantity
      if (newQty > product.stock || newQty > 10) {
        error.value = '超出可购买上限'
        return false
      }
      base.updateQuantity(product.id, product.sku, newQty)
      return true
    }

    base.addItem({
      productId: product.id,
      sku: product.sku,
      name: product.name,
      price: product.price,
      quantity,
      maxQuantity: Math.min(product.stock, 10),
    })
    return true
  }

  function removeFromCart(productId: string, sku: string) {
    base.removeItem(productId, sku)
    error.value = null
  }

  return { error, addToCart, removeFromCart }
}

// ==================== 编排 Action 层 ====================
// 组合多个 Store
function createOrchestrationActions(
  cartBase: ReturnType<typeof createBaseCartActions>,
  cartBusiness: ReturnType<typeof createBusinessCartActions>
) {
  // 在函数内部访问其他 Store，避免顶层循环依赖
  async function checkout(): Promise<string> {
    const orderStore = useOrderStore()
    const inventoryStore = useInventoryStore()

    try {
      // 预留库存
      await inventoryStore.reserve(cartBase.items.value)

      // 创建订单
      const orderId = await orderStore.create({
        items: cartBase.items.value.map((i) => ({
          productId: i.productId,
          sku: i.sku,
          quantity: i.quantity,
          price: i.price,
        })),
        total: totalPrice.value,
      })

      // 清空购物车
      cartBase.clearAll()

      return orderId
    } catch (err) {
      cartBusiness.error.value =
        err instanceof Error ? err.message : '下单失败'
      throw err
    }
  }

  return { checkout }
}

// ==================== Store 定义 ====================
export const useCartStore = defineStore('ecommerce-cart', () => {
  const base = createBaseCartActions()
  const business = createBusinessCartActions(base)
  const orchestration = createOrchestrationActions(base, business)

  const totalPrice = computed(() =>
    base.items.value.reduce(
      (sum, item) => sum + item.price * item.quantity,
      0
    )
  )

  const itemCount = computed(() =>
    base.items.value.reduce((sum, item) => sum + item.quantity, 0)
  )

  return {
    // 暴露只读计算属性
    items: computed(() => base.items.value),
    totalPrice,
    itemCount,
    // 暴露业务 Action
    error: business.error,
    addToCart: business.addToCart,
    removeFromCart: business.removeFromCart,
    // 暴露编排 Action
    checkout: orchestration.checkout,
    // 不暴露基础 Action 的原始 setter
  }
})

// factories/createCRUDActions.ts
import { type Ref, ref } from 'vue'

interface CRUDConfig<
  TEntity extends { id: string | number },
  TCreateDTO,
  TUpdateDTO extends Partial<TCreateDTO>,
> {
  /** API 前缀 */
  apiBase: string

  /** 实体名称（用于日志和错误提示） */
  entityName: string

  /** 自定义 fetch 函数（默认用 fetch） */
  fetcher?: (
    url: string,
    options?: RequestInit
  ) => Promise<Response>

  /** 列表获取后的数据提取 */
  extractList?: (data: any) => TEntity[]

  /** 单条数据的提取 */
  extractItem?: (data: any) => TEntity
}

interface CRUDActions<
  TEntity extends { id: string | number },
  TCreateDTO,
  TUpdateDTO extends Partial<TCreateDTO>,
> {
  items: Ref<TEntity[]>
  current: Ref<TEntity | null>
  loading: Ref<boolean>
  error: Ref<string | null>

  fetchAll: () => Promise<TEntity[]>
  fetchOne: (id: TEntity['id']) => Promise<TEntity | null>
  create: (dto: TCreateDTO) => Promise<TEntity | null>
  update: (id: TEntity['id'], dto: TUpdateDTO) => Promise<TEntity | null>
  remove: (id: TEntity['id']) => Promise<boolean>
  clearError: () => void
}

function createCRUDActions<
  TEntity extends { id: string | number },
  TCreateDTO = Record<string, unknown>,
  TUpdateDTO extends Partial<TCreateDTO> = Partial<TCreateDTO>,
>(config: CRUDConfig<TEntity, TCreateDTO, TUpdateDTO>): CRUDActions<TEntity, TCreateDTO, TUpdateDTO> {
  const { apiBase, entityName, fetcher, extractList, extractItem } = config
  const _fetch = fetcher ?? fetch

  const items = ref<TEntity[]>([]) as Ref<TEntity[]>
  const current = ref<TEntity | null>(null)
  const loading = ref(false)
  const error = ref<string | null>(null)

  function setLoading(val: boolean) {
    loading.value = val
  }

  function setError(err: unknown) {
    error.value = err instanceof Error ? err.message : String(err)
  }

  function clearError() {
    error.value = null
  }

  async function fetchAll(): Promise<TEntity[]> {
    setLoading(true)
    clearError()
    try {
      const res = await _fetch(apiBase)
      if (!res.ok) throw new Error(`[${entityName}] fetchAll failed: ${res.status}`)
      const data = await res.json()
      items.value = extractList ? extractList(data) : (data as TEntity[])
      return items.value
    } catch (err) {
      setError(err)
      return []
    } finally {
      setLoading(false)
    }
  }

  async function fetchOne(id: TEntity['id']): Promise<TEntity | null> {
    setLoading(true)
    clearError()
    try {
      const res = await _fetch(`${apiBase}/${id}`)
      if (!res.ok) {
        if (res.status === 404) {
          current.value = null
          return null
        }
        throw new Error(`[${entityName}] fetchOne(${id}) failed: ${res.status}`)
      }
      const data = await res.json()
      const entity = extractItem ? extractItem(data) : (data as TEntity)
      current.value = entity

      // 同步更新列表中的对应项
      const idx = items.value.findIndex((i) => i.id === id)
      if (idx > -1) {
        items.value[idx] = entity
      }
      return entity
    } catch (err) {
      setError(err)
      return null
    } finally {
      setLoading(false)
    }
  }

  async function create(dto: TCreateDTO): Promise<TEntity | null> {
    setLoading(true)
    clearError()
    try {
      const res = await _fetch(apiBase, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(dto),
      })
      if (!res.ok) throw new Error(`[${entityName}] create failed: ${res.status}`)
      const data = await res.json()
      const entity = extractItem ? extractItem(data) : (data as TEntity)
      items.value.push(entity)
      return entity
    } catch (err) {
      setError(err)
      return null
    } finally {
      setLoading(false)
    }
  }

  async function update(
    id: TEntity['id'],
    dto: TUpdateDTO
  ): Promise<TEntity | null> {
    setLoading(true)
    clearError()
    try {
      const res = await _fetch(`${apiBase}/${id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(dto),
      })
      if (!res.ok) throw new Error(`[${entityName}] update(${id}) failed: ${res.status}`)
      const data = await res.json()
      const entity = extractItem ? extractItem(data) : (data as TEntity)

      const idx = items.value.findIndex((i) => i.id === id)
      if (idx > -1) {
        items.value[idx] = entity
      }
      if (current.value?.id === id) {
        current.value = entity
      }
      return entity
    } catch (err) {
      setError(err)
      return null
    } finally {
      setLoading(false)
    }
  }

  async function remove(id: TEntity['id']): Promise<boolean> {
    setLoading(true)
    clearError()
    try {
      const res = await _fetch(`${apiBase}/${id}`, {
        method: 'DELETE',
      })
      if (!res.ok) throw new Error(`[${entityName}] remove(${id}) failed: ${res.status}`)
      items.value = items.value.filter((i) => i.id !== id)
      if (current.value?.id === id) {
        current.value = null
      }
      return true
    } catch (err) {
      setError(err)
      return false
    } finally {
      setLoading(false)
    }
  }

  return {
    items,
    current,
    loading,
    error,
    fetchAll,
    fetchOne,
    create,
    update,
    remove,
    clearError,
  }
}

// stores/users.ts
import { defineStore } from 'pinia'

interface User {
  id: number
  name: string
  email: string
  role: 'admin' | 'user'
}

interface CreateUserDTO {
  name: string
  email: string
  role: 'admin' | 'user'
}

export const useUserStore = defineStore('users', () => {
  const crud = createCRUDActions<User, CreateUserDTO>({
    apiBase: '/api/users',
    entityName: 'User',
    extractList: (data) => data.users as User[],
    extractItem: (data) => data.user as User,
  })

  // 可在标准 CRUD 基础上追加自定义 Action
  async function promoteToAdmin(userId: number): Promise<boolean> {
    const user = crud.items.value.find((u) => u.id === userId)
    if (!user) return false
    return !!(await crud.update(userId, { role: 'admin' } as any))
  }

  async function batchDelete(userIds: number[]): Promise<number> {
    let deleted = 0
    for (const id of userIds) {
      const ok = await crud.remove(id)
      if (ok) deleted++
    }
    return deleted
  }

  return {
    ...crud,
    promoteToAdmin,
    batchDelete,
  }
})

// stores/__tests__/setup.ts
import { createPinia, setActivePinia } from 'pinia'
import { beforeEach } from 'vitest'

beforeEach(() => {
  // 每个测试用例拥有全新的 Pinia 实例
  setActivePinia(createPinia())
})

// stores/counter.test.ts
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { setActivePinia, createPinia } from 'pinia'
import { useCounterStore } from '../counter'

describe('CounterStore actions', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
  })

  it('increment 应该将 count 加 1', () => {
    const store = useCounterStore()
    expect(store.count).toBe(0)
    store.increment()
    expect(store.count).toBe(1)
  })

  it('incrementBy 应该按指定数量增加', () => {
    const store = useCounterStore()
    store.incrementBy(5)
    expect(store.count).toBe(5)
  })

  it('fetchCount 成功时应该更新 count', async () => {
    const mockCount = 42
    global.fetch = vi.fn().mockResolvedValueOnce({
      ok: true,
      json: async () => ({ value: mockCount }),
    })

    const store = useCounterStore()
    expect(store.loading).toBe(false)

    const promise = store.fetchCount()
    expect(store.loading).toBe(true)

    await promise
    expect(store.count).toBe(mockCount)
    expect(store.loading).toBe(false)
    expect(store.error).toBeNull()
  })

  it('fetchCount 失败时应该设置 error 状态', async () => {
    global.fetch = vi.fn().mockRejectedValueOnce(new Error('Network Error'))

    const store = useCounterStore()
    await store.fetchCount()

    expect(store.error).toBe('Network Error')
    expect(store.loading).toBe(false)
  })
})

// stores/__tests__/retryable-action.test.ts
import { describe, it, expect, vi, beforeEach } from 'vitest'

// 模拟 withRetry 的行为
describe('Retryable Action', () => {
  beforeEach(() => {
    vi.useFakeTimers()
  })

  it('第一次成功就不重试', async () => {
    const fn = vi.fn().mockResolvedValue('success')
    const action = createRetryableAction(fn, {
      actionName: 'test',
      maxRetries: 3,
      retryDelay: 100,
    })

    const result = await action()
    expect(result).toBe('success')
    expect(fn).toHaveBeenCalledTimes(1)
  })

  it('失败后重试直到成功', async () => {
    const fn = vi
      .fn()
      .mockRejectedValueOnce(new Error('fail 1'))
      .mockRejectedValueOnce(new Error('fail 2'))
      .mockResolvedValueOnce('success')

    const action = createRetryableAction(fn, {
      actionName: 'test',
      maxRetries: 3,
      retryDelay: 100,
    })

    // 由于使用 fake timers，需要用 vi.advanceTimers 推进延迟
    const promise = action()
    await vi.advanceTimersByTimeAsync(100)
    await vi.advanceTimersByTimeAsync(100)

    const result = await promise
    expect(result).toBe('success')
    expect(fn).toHaveBeenCalledTimes(3)
  })

  it('超过最大重试次数后抛出 ActionMaxRetriesError', async () => {
    const fn = vi.fn().mockRejectedValue(new Error('always fail'))

    const action = createRetryableAction(fn, {
      actionName: 'test',
      maxRetries: 2,
      retryDelay: 100,
    })

    const promise = action()
    await vi.advanceTimersByTimeAsync(100)
    await vi.advanceTimersByTimeAsync(100)

    await expect(promise).rejects.toThrow(/test.*2 retries/)
    expect(fn).toHaveBeenCalledTimes(3) // 初始 + 2 次重试
  })

  it('超时后应触发重试', async () => {
    // 模拟一个超时的 Action
    const fn = vi.fn().mockImplementation(
      () =>
        new Promise((resolve) => setTimeout(() => resolve('too late'), 5000))
    )

    const action = createRetryableAction(fn, {
      actionName: 'test',
      maxRetries: 1,
      retryDelay: 100,
      timeout: 1000,
    })

    const promise = action()

    // 推进到超时
    await vi.advanceTimersByTimeAsync(1100)
    // 推进重试间隔
    await vi.advanceTimersByTimeAsync(100)
    // 第二次也超时
    await vi.advanceTimersByTimeAsync(1100)

    await expect(promise).rejects.toThrow(/test.*1 retries/)
  })
})

// stores/checkout.test.ts
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { setActivePinia, createPinia } from 'pinia'

describe('Checkout Store interactions', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
  })

  it('addToCart 应该检查库存', () => {
    const cartStore = useCartStore()
    const productStore = useProductStore()

    // 设置库存
    productStore.products = [
      { id: 1, name: 'Item 1', stock: 3 },
    ]

    const result = cartStore.addToCart(1, 2)
    expect(result).toBe(true)
    expect(cartStore.items).toHaveLength(1)
    expect(cartStore.items[0].quantity).toBe(2)
  })

  it('addToCart 超库存应该返回 false', () => {
    const cartStore = useCartStore()
    const productStore = useProductStore()

    productStore.products = [
      { id: 1, name: 'Item 1', stock: 1 },
    ]

    const result = cartStore.addToCart(1, 5)
    expect(result).toBe(false)
    expect(cartStore.error).toContain('库存不足')
    expect(cartStore.items).toHaveLength(0)
  })

  it('checkout 应该依次调用预留库存和创建订单', async () => {
    // Mock inventoryStore 和 orderStore
    const mockReserve = vi.fn().mockResolvedValue(true)
    const mockCreate = vi.fn().mockResolvedValue('order-123')

    vi.spyOn(require('@/stores/inventory'), 'useInventoryStore').mockReturnValue({
      reserve: mockReserve,
    })
    vi.spyOn(require('@/stores/order'), 'useOrderStore').mockReturnValue({
      create: mockCreate,
    })

    const cartStore = useCartStore()
    cartStore.items = [{ productId: 'p1', sku: 's1', quantity: 1, price: 100 }]

    const orderId = await cartStore.checkout()

    expect(mockReserve).toHaveBeenCalledWith(cartStore.items)
    expect(mockCreate).toHaveBeenCalled()
    expect(orderId).toBe('order-123')
    expect(cartStore.items).toHaveLength(0) // 下单后清空
  })

  it('checkout 失败时应该回滚预留库存', async () => {
    const mockReserve = vi.fn().mockResolvedValue(true)
    const mockRelease = vi.fn().mockResolvedValue(undefined)
    const mockCreate = vi.fn().mockRejectedValue(new Error('Order creation failed'))

    vi.spyOn(require('@/stores/inventory'), 'useInventoryStore').mockReturnValue({
      reserve: mockReserve,
      releaseItems: mockRelease,
    })
    vi.spyOn(require('@/stores/order'), 'useOrderStore').mockReturnValue({
      create: mockCreate,
    })

    const cartStore = useCartStore()
    cartStore.items = [{ productId: 'p1', sku: 's1', quantity: 1, price: 100 }]

    await expect(cartStore.checkout()).rejects.toThrow()

    // 库存应该被释放
    expect(mockRelease).toHaveBeenCalled()
    // 购物车不应该被清空（回滚生效）
    expect(cartStore.items).toHaveLength(1)
  })
})

describe('$onAction side effects', () => {
  it('应该在 action 完成后触发 after 回调', async () => {
    setActivePinia(createPinia())
    const store = useCounterStore()
    const afterSpy = vi.fn()

    store.$onAction(({ after }) => {
      after(afterSpy)
    })

    store.increment()
    expect(afterSpy).toHaveBeenCalledTimes(1)
    expect(afterSpy).toHaveBeenCalledWith(undefined) // increment 无返回值
  })

  it('应该在 action 出错时触发 onError 回调', async () => {
    setActivePinia(createPinia())
    const store = useTodoStore()
    const errorSpy = vi.fn()

    store.$onAction(({ onError }) => {
      onError(errorSpy)
    })

    try {
      await store.toggleTodo('non-existent')
    } catch {
      // 预期会抛错
    }

    expect(errorSpy).toHaveBeenCalledTimes(1)
  })
})

// benchmark：向数组追加 1000 条数据
import { bench } from 'vitest'

const store = useLargeListStore()

// 逐个 push — 每次 push 触发一次响应式更新
bench('逐个 push 1000 条', () => {
  store.items = []
  for (let i = 0; i < 1000; i++) {
    store.pushItem({ id: i, label: `Item ${i}`, value: Math.random() })
  }
})

// 批量 push（收集后一次性更新）— 对数组的新引用触发一次更新
bench('批量 push 1000 条（一次性替换引用）', () => {
  const batch: Array<{ id: number; label: string; value: number }> = []
  for (let i = 0; i < 1000; i++) {
    batch.push({ id: i, label: `Item ${i}`, value: Math.random() })
  }
  // 关键：替换整个数组引用，只触发一次响应式通知
  store.replaceItems(batch)
})

// $patch 方式 — 只触发一次订阅通知
bench('$patch 方式 1000 条', () => {
  const batch: Array<{ id: number; label: string; value: number }> = []
  for (let i = 0; i < 1000; i++) {
    batch.push({ id: i, label: `Item ${i}`, value: Math.random() })
  }
  store.$patch((state) => {
    state.items = batch
  })
})

// composables/useDebouncedAction.ts
import { ref, type Ref } from 'vue'

interface DebouncedActionReturn<TArgs extends any[], TResult> {
  invoke: (...args: TArgs) => Promise<TResult | undefined>
  cancel: () => void
  isPending: Ref<boolean>
  flush: () => Promise<TResult | undefined>
}

function useDebouncedAction<TArgs extends any[], TResult>(
  action: (...args: TArgs) => Promise<TResult>,
  delay: number = 300
): DebouncedActionReturn<TArgs, TResult> {
  const isPending = ref(false)
  let timer: ReturnType<typeof setTimeout> | null = null
  let lastArgs: TArgs | null = null
  let resolvePending: ((value: TResult | undefined) => void) | null = null
  let rejectPending: ((reason: unknown) => void) | null = null

  function cancel() {
    if (timer !== null) {
      clearTimeout(timer)
      timer = null
    }
    if (resolvePending) {
      resolvePending(undefined)
      resolvePending = null
      rejectPending = null
    }
    isPending.value = false
  }

  function flush(): Promise<TResult | undefined> {
    if (timer !== null) {
      clearTimeout(timer)
      timer = null
      return executeNow()
    }
    return Promise.resolve(undefined)
  }

  async function executeNow(): Promise<TResult | undefined> {
    if (!lastArgs) return undefined
    isPending.value = true
    try {
      const result = await action(...lastArgs)
      resolvePending?.(result)
      return result
    } catch (err) {
      rejectPending?.(err)
      return undefined
    } finally {
      isPending.value = false
      resolvePending = null
      rejectPending = null
      lastArgs = null
    }
  }

  function invoke(...args: TArgs): Promise<TResult | undefined> {
    lastArgs = args
    cancel() // 取消之前的定时任务

    return new Promise<TResult | undefined>((resolve, reject) => {
      resolvePending = resolve
      rejectPending = reject

      timer = setTimeout(() => {
        timer = null
        executeNow()
      }, delay)
    })
  }

  return { invoke, cancel, isPending, flush }
}

// stores/search.ts
export const useSearchStore = defineStore('search', () => {
  const query = ref('')
  const results = ref<SearchResult[]>([])
  const loading = ref(false)

  const searchAction = useDebouncedAction(
    async (q: string) => {
      loading.value = true
      try {
        const res = await fetch(`/api/search?q=${encodeURIComponent(q)}`)
        const data = await res.json()
        results.value = data
        return data
      } finally {
        loading.value = false
      }
    },
    300 // 300ms 防抖
  )

  return {
    query,
    results,
    loading,
    search: searchAction.invoke,
    cancelSearch: searchAction.cancel,
    flushSearch: searchAction.flush,
  }
})

// stores/largeList.ts — 大列表的高性能策略
export const useLargeListStore = defineStore('largeList', () => {
  const rawItems = ref<DataItem[]>([])
  const loading = ref(false)

  // 策略 1：分片加载，避免一次性处理过多数据
  async function loadInChunks(
    itemIds: number[],
    chunkSize: number = 100,
    onChunkLoaded?: (chunk: DataItem[]) => void
  ) {
    loading.value = true
    try {
      for (let i = 0; i < itemIds.length; i += chunkSize) {
        const chunk = itemIds.slice(i, i + chunkSize)
        const res = await fetch(
          `/api/items?ids=${chunk.join(',')}`
        )
        const data = await res.json()

        // 使用 $patch 合并，只触发一次通知
        rawItems.value = [...rawItems.value, ...data]
        onChunkLoaded?.(data)

        // 让出主线程，保持 UI 响应
        await new Promise((resolve) => setTimeout(resolve, 0))
      }
    } finally {
      loading.value = false
    }
  }

  // 策略 2：预处理排序，只在数据完整加载后触发一次排序
  const sortedItems = ref<DataItem[]>([])

  function refreshSorted() {
    // 计算排序在 Action 中完成，避免在 computed 中重复计算大数组
    sortedItems.value = [...rawItems.value].sort(
      (a, b) => b.timestamp - a.timestamp
    )
  }

  // 策略 3：使用 $patch 进行批量修改
  function batchUpdate(updates: Map<number, Partial<DataItem>>) {
    store.$patch((state) => {
      for (const [id, update] of updates) {
        const item = state.rawItems.find((i: DataItem) => i.id === id)
        if (item) {
          Object.assign(item, update)
        }
      }
    })
    refreshSorted()
  }

  return {
    rawItems,
    sortedItems,
    loading,
    loadInChunks,
    refreshSorted,
    batchUpdate,
  }
})

// composables/usePerformanceMonitor.ts
function useActionPerfMonitor(storeName: string) {
  const timings = ref<Record<string, { avg: number; count: number; max: number }>>({})

  function attach<T extends { $onAction: (...args: any[]) => any }>(store: T) {
    store.$onAction(({ name, after }) => {
      const start = performance.now()

      after(() => {
        const duration = performance.now() - start
        const prev = timings.value[name] ?? {
          avg: 0,
          count: 0,
          max: 0,
        }

        timings.value[name] = {
          avg:
            (prev.avg * prev.count + duration) /
            (prev.count + 1),
          count: prev.count + 1,
          max: Math.max(prev.max, duration),
        }
      })
    })
  }

  return { timings, attach }
}

// 使用
const perfMonitor = useActionPerfMonitor('products')
const productStore = useProductStore()
perfMonitor.attach(productStore)

// 可以在开发面板中查看
watchEffect(() => {
  console.table(perfMonitor.timings.value)
})

// ==================== Vuex ====================
const vuexStore = {
  state: { count: 0, loading: false },
  mutations: {
    SET_COUNT(state, val) { state.count = val },
    SET_LOADING(state, val) { state.loading = val },
  },
  actions: {
    async fetchCount({ commit }) {
      commit('SET_LOADING', true)
      try {
        const res = await fetch('/api/count')
        const data = await res.json()
        commit('SET_COUNT', data.value)
      } finally {
        commit('SET_LOADING', false)
      }
    },
    // 调用其他 action
    async reset({ dispatch }) {
      await dispatch('someOtherAction')
      // 必须用 dispatch 调用
    },
  },
}

// ==================== Pinia（Option Store）====================
const piniaStore = defineStore('counter', {
  state: () => ({ count: 0, loading: false }),
  actions: {
    async fetchCount() {
      this.loading = true // 直接修改，无需 mutation
      try {
        const res = await fetch('/api/count')
        const data = await res.json()
        this.count = data.value
      } finally {
        this.loading = false
      }
    },
    // 调用其他 action — 直接用 this
    async reset() {
      await this.someOtherAction() // 无需 dispatch
    },
  },
})

// ==================== Pinia（Setup Store）====================
const piniaSetupStore = defineStore('counter', () => {
  const count = ref(0)
  const loading = ref(false)

  async function fetchCount() {
    loading.value = true
    try {
      const res = await fetch('/api/count')
      count.value = (await res.json()).value
    } finally {
      loading.value = false
    }
  }

  function someOtherAction() { /* ... */ }

  async function reset() {
    await someOtherAction() // 直接调用
  }

  return { count, loading, fetchCount, someOtherAction, reset }
})

// Vuex — 删除这些
mutations: {
  SET_USER(state, user) { state.user = user },
  SET_LOADING(state, val) { state.loading = val },
}

// Pinia — 在 action 中直接修改
actions: {
  async fetchUser() {
    this.loading = true  // 直接改
    this.user = await api.getUser()
    this.loading = false
  }
}

// Vuex
async fetchData({ commit, state, dispatch, getters }) {
  if (getters.isReady) {
    const data = await api.fetch()
    commit('SET_DATA', data)
    dispatch('afterFetch')
  }
}

// Pinia（Option Store）
async fetchData() {
  if (this.isReady) {             // getters → this.xxx
    const data = await api.fetch()
    this.data = data               // commit → this.xxx =
    await this.afterFetch()        // dispatch → this.actionName()
  }
}

// Vuex 组件
import { mapActions } from 'vuex'
methods: {
  ...mapActions('module', ['fetchData', 'updateData']),
}

// Pinia 组件
const store = useModuleStore()
const { fetchData, updateData } = store

// Vuex 测试
await store.dispatch('fetchData')
expect(store.state.data).toEqual(mockData)

// Pinia 测试
await store.fetchData()
expect(store.data).toEqual(mockData)

// Vuex plugin
store.subscribeAction({
  before: (action) => { /* ... */ },
  after: (action) => { /* ... */ },
  error: (action) => { /* ... */ },
})

// Pinia $onAction
store.$onAction(({ name, args, after, onError }) => {
  // before: 直接在此处
  after((result) => { /* ... */ })
  onError((err) => { /* ... */ })
})

// Vuex
store.dispatch('products/fetchProducts')
// Pinia（无需 namespace prefix）
const productStore = useProductStore()
productStore.fetchProducts()