State

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

interface CounterState {
  count: number
  name: string
  items: string[]
  user: {
    id: number
    name: string
  } | null
}

export const useCounterStore = defineStore('counter', {
  // state 必须是返回初始状态的函数
  state: (): CounterState => ({
    count: 0,
    name: 'Counter',
    items: [],
    user: null
  })
})

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

export const useCounterStore = defineStore('counter', () => {
  // 使用 ref 定义响应式状态
  const count = ref(0)
  const name = ref('Counter')
  const items = ref<string[]>([])
  const user = ref<{ id: number; name: string } | null>(null)
  
  return { count, name, items, user }
})

// ✅ 推荐：使用工厂函数创建初始状态
const createInitialState = () => ({
  count: 0,
  items: [],
  metadata: {
    createdAt: new Date(),
    version: '1.0.0'
  }
})

export const useStore = defineStore('store', {
  state: () => createInitialState()
})

// ✅ 使用函数确保每次调用都是新对象
state: () => ({
  items: [],           // 每次都是新数组
  timestamp: Date.now() // 每次都是新时间戳
})

// ❌ 避免：直接使用可变对象
state: () => sharedObject  // 多个 Store 共享同一引用！

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

const counter = useCounterStore()

// 直接访问 state
console.log(counter.count)     // 0
console.log(counter.name)      // 'Counter'
console.log(counter.items)     // []
</script>

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Name: {{ counter.name }}</p>
  </div>
</template>

const counter = useCounterStore()

// 获取完整状态对象
console.log(counter.$state)

// {
//   count: 0,
//   name: 'Counter',
//   items: [],
//   user: null
// }

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

const counter = useCounterStore()

// ❌ 错误：直接解构会失去响应性
const { count, name } = counter  // 失去响应性！

// ✅ 正确：使用 storeToRefs 保持响应性
const { count, name, items } = storeToRefs(counter)

// 修改值
count.value = 10  // 响应式更新
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Name: {{ name }}</p>
  </div>
</template>

// storeToRefs 内部实现原理（简化版）
import { toRef, toRefs } from 'vue'

function storeToRefs(store) {
  const refs = {}
  
  for (const key in store) {
    const value = store[key]
    
    // 只处理 state 和 getters（响应式属性）
    if (!value?.constructor || value.constructor.name === 'Function') {
      continue  // 跳过 actions
    }
    
    refs[key] = toRef(store, key)
  }
  
  return refs
}

const counter = useCounterStore()

// 直接赋值
counter.count = 10
counter.name = 'New Counter'

// 修改数组
counter.items.push('new item')
counter.items = [...counter.items, 'another item']

// 修改嵌套对象
counter.user = { id: 1, name: 'John' }
counter.user!.name = 'Jane'  // TypeScript 需要非空断言

const counter = useCounterStore()

// ==================== 对象形式 ====================
counter.$patch({
  count: 10,
  name: 'New Counter'
})

// $patch 会合并多个修改，只触发一次更新
// 性能更好！

// ==================== 函数形式 ====================
// 适合复杂修改逻辑
counter.$patch((state) => {
  state.count++
  state.items.push('new item')
  state.items.push('another item')
  // 可以包含复杂逻辑
  if (state.count > 10) {
    state.name = 'Large Counter'
  }
})

// ❌ 低效：多次修改触发多次更新
counter.count = 1
counter.name = 'A'
counter.items.push('x')
// 触发 3 次响应式更新

// ✅ 高效：一次修改触发一次更新
counter.$patch((state) => {
  state.count = 1
  state.name = 'A'
  state.items.push('x')
})
// 只触发 1 次响应式更新

const counter = useCounterStore()

// 替换整个状态
counter.$state = {
  count: 100,
  name: 'Replaced',
  items: ['a', 'b'],
  user: { id: 1, name: 'John' }
}

// ⚠️ 注意：这会完全替换，不是合并！

const counter = useCounterStore()

// 修改状态
counter.count = 100
counter.name = 'Modified'

// 重置到初始状态
counter.$reset()

console.log(counter.count)  // 0
console.log(counter.name)   // 'Counter'

export const useCounterStore = defineStore('counter', () => {
  // 定义初始状态
  const initialState = {
    count: 0,
    name: 'Counter',
    items: [] as string[]
  }
  
  const count = ref(initialState.count)
  const name = ref(initialState.name)
  const items = ref<string[]>([...initialState.items])
  
  // 手动实现 $reset
  function $reset() {
    count.value = initialState.count
    name.value = initialState.name
    items.value = [...initialState.items]
  }
  
  return { count, name, items, $reset }
})

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

export function useResettableState<T extends object>(initialState: T) {
  const state = {} as { [K in keyof T]: Ref<T[K]> }
  
  // 创建响应式引用
  for (const key in initialState) {
    state[key] = ref(initialState[key])
  }
  
  // 重置函数
  function $reset() {
    for (const key in initialState) {
      state[key].value = initialState[key]
    }
  }
  
  return { ...state, $reset }
}

// 使用
export const useStore = defineStore('store', () => {
  const { count, name, $reset } = useResettableState({
    count: 0,
    name: 'Store'
  })
  
  return { count, name, $reset }
})

const counter = useCounterStore()

// 订阅状态变化
const unsubscribe = counter.$subscribe((mutation, state) => {
  // mutation.type: 变更类型
  // - 'direct': 直接修改
  // - 'patch object': $patch 对象形式
  // - 'patch function': $patch 函数形式
  
  console.log('Type:', mutation.type)
  console.log('Store ID:', mutation.storeId)  // 'counter'
  console.log('Payload:', mutation.payload)    // $patch 的参数（仅 object 类型）
  
  // state 是最新的状态
  console.log('New state:', state)
})

// 取消订阅
unsubscribe()

const counter = useCounterStore()

// 自动持久化到 localStorage
counter.$subscribe((mutation, state) => {
  localStorage.setItem('counter-store', JSON.stringify(state))
})

// 初始化时恢复
const saved = localStorage.getItem('counter-store')
if (saved) {
  counter.$patch(JSON.parse(saved))
}

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

const counter = useCounterStore()

// 组件挂载时订阅
const unsubscribe = counter.$subscribe((mutation, state) => {
  console.log('State changed:', mutation.type, state.count)
})

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

// 订阅时配置选项
counter.$subscribe(
  (mutation, state) => {
    console.log('Changed:', mutation)
  },
  {
    detached: true,  // 组件卸载后仍然保持订阅
    deep: true,      // 深度监听嵌套对象
    flush: 'sync'    // 同步触发回调
  }
)

Pinia State 响应式机制
┌─────────────────────────────────────────────────────────────┐
│                        Pinia Store                           │
│                                                               │
│  Option Store                    Setup Store                 │
│  ┌─────────────────┐            ┌─────────────────┐         │
│  │ state: () => ({ │            │ const count =   │         │
│  │   count: 0,     │            │   ref(0)        │         │
│  │   items: []     │            │ const items =   │         │
│  │ })              │            │   ref([])       │         │
│  └────────┬────────┘            └────────┬────────┘         │
│           │                              │                   │
│           ▼                              ▼                   │
│  ┌─────────────────────────────────────────────────────┐    │
│  │               Vue Reactivity System                  │    │
│  │  ┌─────────────┐    ┌─────────────┐                 │    │
│  │  │   Ref<T>    │    │ Reactive<T> │                 │    │
│  │  │ (基础类型)  │    │ (对象类型)  │                 │    │
│  │  └─────────────┘    └─────────────┘                 │    │
│  └─────────────────────────────────────────────────────┘    │
│                                                               │
└─────────────────────────────────────────────────────────────┘

// Option Store 内部实现
state: () => ({ count: 0, items: [] })

// 等价于
state: () => reactive({
  count: ref(0),      // 基础类型用 ref
  items: ref([])      // 引用类型也用 ref（确保整体替换响应式）
})

// ❌ 不推荐：将派生数据存储在 state
export const useStore = defineStore('store', () => {
  const items = ref<Item[]>([])
  const totalPrice = ref(0)  // 派生数据，不需要存储
  
  function calculateTotal() {
    totalPrice.value = items.value.reduce((sum, item) => sum + item.price, 0)
  }
  
  return { items, totalPrice }
})

// ✅ 推荐：使用 getter 计算派生数据
export const useStore = defineStore('store', () => {
  const items = ref<Item[]>([])
  
  // getter 自动缓存，性能更好
  const totalPrice = computed(() => 
    items.value.reduce((sum, item) => sum + item.price, 0)
  )
  
  return { items, totalPrice }
})

// ❌ 低效：每次修改整个列表
items.value = items.value.filter(item => item.active)

// ✅ 高效：使用 $patch 批量操作
$patch((state) => {
  // 直接操作数组，避免创建新数组
  for (let i = state.items.length - 1; i >= 0; i--) {
    if (!state.items[i].active) {
      state.items.splice(i, 1)
    }
  }
})

import { shallowRef } from 'vue'

export const useLargeDataStore = defineStore('largeData', () => {
  // 对于大型不可变数据，使用 shallowRef 避免深度响应式
  const largeData = shallowRef<LargeObject>({})
  
  function updateData(newData: LargeObject) {
    // 直接替换，不深度追踪内部属性变化
    largeData.value = newData
  }
  
  return { largeData, updateData }
})

const counter = useCounterStore()

// ❌ 解构后是普通值，不是响应式引用
const { count } = counter
count = 10  // 只是修改局部变量，不影响 store

// ✅ 使用 storeToRefs 解构
const { count } = storeToRefs(counter)
count.value = 10  // 修改响应式引用，触发更新

// 使用 reactive 或手动处理
export const useStore = defineStore('store', () => {
  const config = ref({
    database: {
      host: 'localhost',
      port: 3306,
      credentials: {
        username: 'root',
        password: ''
      }
    }
  })
  
  // 直接修改深层属性
  function updatePort(port: number) {
    config.value.database.port = port
  }
  
  return { config, updatePort }
})

// 方案1：手动实现
export const useStore = defineStore('store', () => {
  const count = ref(0)
  
  // 初始化时恢复
  const saved = localStorage.getItem('store-count')
  if (saved) {
    count.value = JSON.parse(saved)
  }
  
  // 变化时保存
  watch(count, (val) => {
    localStorage.setItem('store-count', JSON.stringify(val))
  })
  
  return { count }
})

// 方案2：使用 pinia-plugin-persistedstate
// 见插件章节

State → Getters → Component
         ↓
      缓存结果

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

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    items: [
      { id: 1, name: 'Apple', price: 10 },
      { id: 2, name: 'Banana', price: 20 },
      { id: 3, name: 'Orange', price: 15 }
    ]
  }),
  
  getters: {
    // ==================== 基本用法 ====================
    // 箭头函数，接收 state 参数
    double: (state) => state.count * 2,
    
    // ==================== 访问其他 getter ====================
    // 使用 this 访问当前 Store 实例
    doublePlusOne(): number {
      return this.double + 1
    },
    
    // ==================== 返回函数（支持参数）====================
    getItemById: (state) => (id: number) => {
      return state.items.find(item => item.id === id)
    },
    
    // ==================== 使用其他 Store ====================
    doubleWithUser(): string {
      const userStore = useUserStore()
      return `${this.double} - ${userStore.name}`
    }
  }
})

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

export const useCounterStore = defineStore('counter', () => {
  // State
  const count = ref(0)
  const items = ref([
    { id: 1, name: 'Apple', price: 10 },
    { id: 2, name: 'Banana', price: 20 },
    { id: 3, name: 'Orange', price: 15 }
  ])
  
  // ==================== 使用 computed 定义 Getters ====================
  
  // 基本 getter
  const double = computed(() => count.value * 2)
  
  // 访问其他 getter
  const doublePlusOne = computed(() => double.value + 1)
  
  // 返回函数（注意：这种方式会失去缓存！）
  const getItemById = computed(() => (id: number) => {
    return items.value.find(item => item.id === id)
  })
  
  // 使用其他 Store
  const doubleWithUser = computed(() => {
    const userStore = useUserStore()
    return `${double.value} - ${userStore.name}`
  })
  
  return {
    count,
    items,
    double,
    doublePlusOne,
    getItemById,
    doubleWithUser
  }
})

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

const counter = useCounterStore()

// 直接访问 getters
console.log(counter.double)          // 0 (如果 count = 0)
console.log(counter.doublePlusOne)   // 1
console.log(counter.getItemById(1))  // { id: 1, name: 'Apple', price: 10 }
</script>

<template>
  <div>
    <p>Double: {{ counter.double }}</p>
    <p>Double + 1: {{ counter.doublePlusOne }}</p>
    <p>Item: {{ counter.getItemById(1)?.name }}</p>
  </div>
</template>

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

const counter = useCounterStore()

// 使用 storeToRefs 解构 getters
const { double, doublePlusOne } = storeToRefs(counter)

// ⚠️ 返回函数的 getter 不能这样用
// const { getItemById } = storeToRefs(counter) // 会得到一个 Ref
// getItemById.value(1) // 这样调用
</script>

<template>
  <div>
    <p>Double: {{ double }}</p>
    <p>Double + 1: {{ doublePlusOne }}</p>
  </div>
</template>

// stores/user.ts
export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'John',
    role: 'admin'
  })
})

// stores/product.ts
import { useUserStore } from './user'

export const useProductStore = defineStore('products', {
  state: () => ({
    products: [
      { id: 1, name: 'Product A', price: 100 },
      { id: 2, name: 'Product B', price: 200 }
    ]
  }),
  
  getters: {
    // 根据用户权限过滤产品
    availableProducts(): Product[] {
      const userStore = useUserStore()
      
      if (userStore.role === 'admin') {
        return this.products
      }
      
      return this.products.filter(p => p.price < 150)
    },
    
    // 组合多个 Store 的数据
    productListWithUser(): string[] {
      const userStore = useUserStore()
      return this.products.map(
        p => `${p.name} (viewed by ${userStore.name})`
      )
    }
  }
})

export const useProductStore = defineStore('products', {
  state: () => ({
    products: [
      { id: 1, name: 'Apple', category: 'fruit', price: 10 },
      { id: 2, name: 'Banana', category: 'fruit', price: 20 },
      { id: 3, name: 'Carrot', category: 'vegetable', price: 15 }
    ]
  }),
  
  getters: {
    // ⚠️ 返回函数的方式会失去缓存优势
    // 每次调用都会执行查找
    getByCategory: (state) => (category: string) => {
      return state.products.filter(p => p.category === category)
    },
    
    // ✅ 更好的方案：使用映射表缓存
    productsByCategory(): Map<string, Product[]> {
      const map = new Map<string, Product[]>()
      
      for (const product of this.products) {
        const list = map.get(product.category) || []
        list.push(product)
        map.set(product.category, list)
      }
      
      return map
    }
  }
})

// 使用
const store = useProductStore()

// 方式1：简单但无缓存
const fruits = store.getByCategory('fruit')

// 方式2：有缓存
const fruits = store.productsByCategory.get('fruit')

// stores/product.ts
interface Product {
  id: number
  name: string
  category: string
  price: number
}

interface ProductState {
  products: Product[]
  selectedId: number | null
}

export const useProductStore = defineStore('products', {
  state: (): ProductState => ({
    products: [],
    selectedId: null
  }),
  
  getters: {
    // 显式指定返回类型
    selectedProduct(): Product | undefined {
      return this.products.find(p => p.id === this.selectedId)
    },
    
    // 复杂类型推断
    productsByPrice(): Record<'cheap' | 'normal' | 'expensive', Product[]> {
      return {
        cheap: this.products.filter(p => p.price < 50),
        normal: this.products.filter(p => p.price >= 50 && p.price < 200),
        expensive: this.products.filter(p => p.price >= 200)
      }
    },
    
    // 参数化 getter 的类型
    filterByPrice:
      (state) =>
      (min: number, max: number): Product[] => {
        return state.products.filter(p => p.price >= min && p.price <= max)
      }
  }
})

Getter 缓存流程
┌─────────────────────────────────────────────────────────────┐
│                                                               │
│  首次访问 getter                                              │
│       │                                                       │
│       ▼                                                       │
│  ┌─────────┐     依赖变化？     ┌─────────────┐              │
│  │ 计算值  │──────────No──────▶ │ 返回缓存结果 │              │
│  └────┬────┘                   └─────────────┘              │
│       │ Yes                                                   │
│       ▼                                                       │
│  ┌─────────┐                                                 │
│  │ 缓存结果│                                                 │
│  │返回新值 │                                                 │
│  └─────────┘                                                 │
│                                                               │
└─────────────────────────────────────────────────────────────┘

export const useExpensiveStore = defineStore('expensive', () => {
  const data = ref<number[]>([])
  
  // 这个 getter 计算成本高
  const expensiveResult = computed(() => {
    console.log('计算中...')  // 只在依赖变化时打印
    
    // 模拟复杂计算
    let result = 0
    for (let i = 0; i < 1000000; i++) {
      result += Math.random()
    }
    return result
  })
  
  return { data, expensiveResult }
})

// 使用
const store = useExpensiveStore()

console.log(store.expensiveResult)  // 打印 "计算中..."
console.log(store.expensiveResult)  // 不打印，使用缓存
console.log(store.expensiveResult)  // 不打印，使用缓存

store.data.push(1)  // 修改依赖
console.log(store.expensiveResult)  // 打印 "计算中..."（重新计算）

export const useStore = defineStore('store', {
  state: () => ({ items: [1, 2, 3] }),
  
  getters: {
    // ❌ 返回函数：每次调用都执行
    findById: (state) => (id: number) => {
      console.log('查找中...')
      return state.items.find(item => item === id)
    },
    
    // ✅ 预计算映射：有缓存
    itemMap(): Map<number, boolean> {
      console.log('构建映射...')
      const map = new Map()
      this.items.forEach(item => map.set(item, true))
      return map
    }
  }
})

// 对比
const store = useStore()

// 每次都执行
store.findById(1)  // 打印 "查找中..."
store.findById(1)  // 打印 "查找中..."
store.findById(1)  // 打印 "查找中..."

// 只执行一次
store.itemMap      // 打印 "构建映射..."
store.itemMap      // 不打印
store.itemMap      // 不打印

// ❌ 不推荐：每次访问都计算
const sortedItems = computed(() => {
  return [...items.value].sort((a, b) => {
    // 复杂排序逻辑
    return a.name.localeCompare(b.name)
  })
})

// ✅ 推荐：只在数据变化时排序
const sortedItems = computed(() => {
  // Vue 的 computed 会自动缓存
  return [...items.value].sort((a, b) => a.name.localeCompare(b.name))
})

// ✅ 对于非常大的数据，考虑使用 Action
function sortItems() {
  items.value.sort((a, b) => a.name.localeCompare(b.name))
}

export const useProductStore = defineStore('products', () => {
  const products = ref<Product[]>([])
  
  // ✅ 使用 Map 提高查询效率
  const productMap = computed(() => {
    const map = new Map<number, Product>()
    products.value.forEach(p => map.set(p.id, p))
    return map
  })
  
  // O(1) 查询
  function getProductById(id: number) {
    return productMap.value.get(id)
  }
  
  return { products, productMap, getProductById }
})

import { computed, ref, watchEffect } from 'vue'

export const useStore = defineStore('store', () => {
  const data = ref<HeavyData | null>(null)
  const needsHeavyComputation = ref(false)
  
  // 只在需要时才计算
  const heavyResult = computed(() => {
    if (!needsHeavyComputation.value || !data.value) {
      return null
    }
    return performHeavyComputation(data.value)
  })
  
  function enableHeavyComputation() {
    needsHeavyComputation.value = true
  }
  
  return { data, heavyResult, enableHeavyComputation }
})

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

interface CartItem {
  id: number
  productId: number
  name: string
  price: number
  quantity: number
}

export const useCartStore = defineStore('cart', () => {
  // ==================== State ====================
  const items = ref<CartItem[]>([])
  const discount = ref(0)  // 折扣百分比
  
  // ==================== Getters ====================
  
  // 商品总数
  const itemCount = computed(() => 
    items.value.reduce((sum, item) => sum + item.quantity, 0)
  )
  
  // 商品种类数
  const uniqueItemCount = computed(() => items.value.length)
  
  // 小计
  const subtotal = computed(() => 
    items.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
  )
  
  // 折扣金额
  const discountAmount = computed(() => 
    subtotal.value * (discount.value / 100)
  )
  
  // 总计
  const total = computed(() => 
    subtotal.value - discountAmount.value
  )
  
  // 是否为空
  const isEmpty = computed(() => items.value.length === 0)
  
  // 是否可以结账
  const canCheckout = computed(() => 
    !isEmpty.value && total.value > 0
  )
  
  // 根据商品 ID 查找购物车项
  const findItemByProductId = computed(() => 
    (productId: number) => items.value.find(item => item.productId === productId)
  )
  
  // 按价格分组
  const itemsByPriceRange = computed(() => {
    const cheap: CartItem[] = []
    const normal: CartItem[] = []
    const expensive: CartItem[] = []
    
    for (const item of items.value) {
      if (item.price < 50) cheap.push(item)
      else if (item.price < 200) normal.push(item)
      else expensive.push(item)
    }
    
    return { cheap, normal, expensive }
  })
  
  // ==================== Actions ====================
  function addItem(product: { id: number; name: string; price: number }) {
    const existing = findItemByProductId.value(product.id)
    
    if (existing) {
      existing.quantity++
    } else {
      items.value.push({
        id: Date.now(),
        productId: product.id,
        name: product.name,
        price: product.price,
        quantity: 1
      })
    }
  }
  
  function removeItem(productId: number) {
    const index = items.value.findIndex(item => item.productId === productId)
    if (index > -1) {
      items.value.splice(index, 1)
    }
  }
  
  function updateQuantity(productId: number, quantity: number) {
    const item = findItemByProductId.value(productId)
    if (item) {
      if (quantity <= 0) {
        removeItem(productId)
      } else {
        item.quantity = quantity
      }
    }
  }
  
  function clearCart() {
    items.value = []
    discount.value = 0
  }
  
  function applyDiscount(percent: number) {
    discount.value = Math.min(100, Math.max(0, percent))
  }
  
  return {
    // State
    items,
    discount,
    // Getters
    itemCount,
    uniqueItemCount,
    subtotal,
    discountAmount,
    total,
    isEmpty,
    canCheckout,
    findItemByProductId,
    itemsByPriceRange,
    // Actions
    addItem,
    removeItem,
    updateQuantity,
    clearCart,
    applyDiscount
  }
})

// ❌ Getter 不应该修改 State
getters: {
  badGetter(state) {
    state.count++  // 不要这样做！
    return state.count
  }
}

// ✅ 使用 Action 修改 State
actions: {
  increment() {
    this.count++
  }
}

// Getters 不支持异步，使用 Action 替代
export const useStore = defineStore('store', () => {
  const userId = ref(1)
  
  // ❌ 不能这样
  // const userData = computed(async () => { ... })
  
  // ✅ 使用 Action
  const userData = ref<User | null>(null)
  
  async function fetchUserData() {
    const response = await fetch(`/api/users/${userId.value}`)
    userData.value = await response.json()
  }
  
  return { userId, userData, fetchUserData }
})

// Option Store 中使用 this
getters: {
  double(state) {
    return state.count * 2
  },
  
  // 需要访问其他 getter 时使用 this
  quadruple() {
    return this.double * 2  // 使用 this，不用 state
  }
}

// Setup Store 中直接引用
const double = computed(() => count.value * 2)
const quadruple = computed(() => double.value * 2)

// Pinia 内部对 Option Store state 的处理（简化源码）
import { reactive, toRef } from 'vue'

function createOptionStore(id, options) {
  // 1. 调用 state 工厂函数获取初始状态对象
  const initialState = options.state()

  // 2. 用 reactive() 包装整个 state 对象
  //    注意：reactive 会深度遍历，所有嵌套属性都变成响应式
  const state = reactive(initialState)

  // 3. 将 state 的每个属性挂载到 store 实例上
  //    通过 Object.defineProperty 或 Proxy 实现属性代理
  for (const key in state) {
    Object.defineProperty(store, key, {
      get() {
        return state[key]
      },
      set(value) {
        state[key] = value
      }
    })
  }

  return store
}

// Setup Store 的处理更简单
function createSetupStore(id, setup) {
  // 1. 执行 setup 函数，收集返回的 ref/computed/函数
  const setupResult = setup()

  // 2. 将返回值直接挂载到 store 实例
  //    ref 和 computed 本身就是响应式的，无需额外包装
  for (const key in setupResult) {
    Object.defineProperty(store, key, {
      get() {
        return setupResult[key]
      },
      set(value) {
        setupResult[key] = value
      }
    })
  }

  return store
}

// ───── Option Store ─────
// state 整体是 reactive，内部属性被自动解包
const store = defineStore('opt', {
  state: () => ({
    count: 0,        // 被 reactive 包装 → 访问 store.count 得到 0（已解包）
    nested: {
      deep: 'value'  // 深层也是响应式的
    }
  })
})

// ───── Setup Store ─────
// 每个属性是独立的 ref，需要 .value 访问（在 setup 内部）
const store = defineStore('setup', () => {
  const count = ref(0)        // Ref<number>
  const nested = ref({ deep: 'value' })  // Ref<object>，内部被 reactive 包装
  return { count, nested }
})
// 访问 store.count 得到 0（自动解包，同模板中的 ref 解包）

// Pinia 内部 $state 的实现（简化源码）
class Store {
  // 内部持有的响应式状态
  private _state: UnwrapRef<SS>

  // $state 的 getter
  get $state(): UnwrapRef<SS> {
    return this._state
  }

  // $state 的 setter —— 核心魔法
  set $state(newState: SS) {
    // 1. 通过 $patch 对象模式逐属性赋值
    //    这样不会破坏响应式引用，只是更新值
    this.$patch((state) => {
      // 2. 先删除旧 state 中不存在于新 state 的属性
      for (const key in state) {
        if (!(key in newState)) {
          delete state[key]
        }
      }
      // 3. 将新 state 的属性逐个赋值
      //    直接赋值给 reactive 对象的属性 → 保持响应式
      for (const key in newState) {
        state[key] = newState[key]
      }
    })
  }
}

// ❌ 如果直接替换 reactive 对象
this._state = reactive(newState)
// 问题：所有引用旧 _state 的 watcher、computed、组件渲染
//       都会失效，因为它们追踪的是旧 reactive 对象的依赖

// ✅ 通过 $patch 逐属性更新
// 保持 reactive 对象引用不变，只更新内部值
// 所有依赖追踪仍然有效

const store = useCounterStore()

// 假设组件中有 watch
watch(() => store.$state, (newState) => {
  console.log('state 变了')
}, { deep: true })

// 整体替换
store.$state = { count: 100, name: 'New', items: [], user: null }

// watch 正常触发 —— 因为 reactive 引用没变，内部值变了

// Pinia 内部 $patch 的简化实现
function $patch(partialOrFn: Partial<SS> | ((state: SS) => void)) {
  if (typeof partialOrFn === 'function') {
    // ========== 函数模式 ==========
    // 直接将内部 reactive state 传入函数
    // 用户在函数内直接修改 state 的属性
    // 因为是 reactive 对象，所有修改自动被追踪
    partialOrFn(this._state)

    // 回调通知（合并为一次）
    triggerSubscriptions('patch function', this._state)

  } else {
    // ========== 对象模式 ==========
    // 遍历传入对象的每个 key，赋值到内部 state
    // 同样是直接修改 reactive 对象属性
    for (const key in partialOrFn) {
      this._state[key] = partialOrFn[key]
    }

    // 回调通知（合并为一次），携带 payload
    triggerSubscriptions('patch object', this._state, partialOrFn)
  }
}

// 对象模式：适合简单的键值更新
store.$patch({
  count: 10,
  name: 'Updated'
})

// 函数模式：适合包含逻辑的批量操作
store.$patch((state) => {
  // 可以写任意复杂逻辑
  state.count++
  if (state.count > 100) {
    state.items.push({ id: state.count, name: `Item ${state.count}` })
  }
  // 可以操作数组
  state.items.sort((a, b) => a.id - b.id)
})

// Pinia 内部 $subscribe 的简化实现
function $subscribe(
  callback: SubscriptionCallback<SS>,
  options?: { detached?: boolean; deep?: boolean; flush?: 'sync' | 'post' | 'pre' }
) {
  // 核心：使用 Vue 的 watch API 监听内部 reactive state
  const stopWatcher = watch(
    // 监听源：内部 reactive state
    () => this._state,

    // 回调：包装为 Pinia 的 mutation 格式
    (newState, oldState) => {
      callback(
        {
          storeId: this.$id,
          type: this._currentMutationType,  // 'direct' | 'patch object' | 'patch function'
          payload: this._currentMutationPayload,
        },
        newState
      )
    },

    // watch 选项
    {
      deep: options?.deep ?? true,   // 默认深度监听
      flush: options?.flush ?? 'post', // 默认在 DOM 更新后触发
      immediate: false,               // 不立即触发
    }
  )

  // detached 处理
  if (options?.detached) {
    // 将 stopWatcher 从组件作用域中移除
    // 组件卸载时不会自动停止
    removeFromScope(stopWatcher)
  }

  // 返回取消订阅函数
  return stopWatcher
}

// 1. 如何区分 mutation 类型
// Pinia 内部在每次修改前设置当前类型标记
let currentMutationType: MutationType = 'direct'

// 直接修改 → 'direct'
store.count = 10
// 内部：currentMutationType = 'direct'; state.count = 10; triggerSubscriptions()

// $patch 对象 → 'patch object'
store.$patch({ count: 10 })
// 内部：currentMutationType = 'patch object'; ...; triggerSubscriptions()

// $patch 函数 → 'patch function'
store.$patch((state) => { state.count = 10 })
// 内部：currentMutationType = 'patch function'; ...; triggerSubscriptions()

// 2. 批量修改合并为一次通知
// Pinia 利用 Vue 的同步批处理机制（effectScope）
// 在同一个同步 tick 内的多次修改只触发一次 watch 回调

// Pinia storeToRefs 的完整简化实现
import { toRef, isRef, isReactive } from 'vue'

function storeToRefs<T extends Store>(store: T): ToRefs<T> {
  // 1. 获取 store 的所有自有属性
  const result: Record<string, unknown> = {}

  for (const key in store) {
    const value = store[key]

    // 2. 跳过函数（actions）
    if (typeof value === 'function') continue

    // 3. 跳过 Pinia 内部属性（以 $ 开头）
    if (key.startsWith('$')) continue

    // 4. 跳过 Symbol 属性
    if (typeof key === 'symbol') continue

    // 5. 将属性转为 Ref
    //    toRef 会保持与原始 reactive 对象的响应式连接
    result[key] = toRef(store, key)
  }

  return result as ToRefs<T>
}

// toRef 的实现原理
function toRef(obj, key) {
  return {
    get value() {
      // 读取时从原始对象获取 → 触发依赖追踪
      return obj[key]
    },
    set value(newVal) {
      // 写入时设置到原始对象 → 触发响应式更新
      obj[key] = newVal
    }
  }
}

// 所以 storeToRefs 返回的 ref：
const { count } = storeToRefs(store)
count.value = 10  // 等价于 store.count = 10
// 两者操作的是同一个响应式数据源

// storeToRefs 只提取 state 和 getters
// 对于 Setup Store 中的 ref，storeToRefs 返回的是一个新的 Ref
// 这个新 Ref 通过 toRef 连接到 store 实例

const store = useCounterStore()

// store.count 是 number（ref 已解包）
// storeToRefs(store).count 是 Ref<number>

// 两者响应式等价：
store.count = 5           // 触发更新
const { count } = storeToRefs(store)
count.value = 5           // 同样触发更新，效果完全一致

// stores/user.ts        —— 用户认证、个人信息
// stores/products.ts    —— 产品列表、分类、筛选
// stores/cart.ts        —— 购物车、优惠券
// stores/order.ts       —— 订单历史、当前订单
// stores/ui.ts          —— 全局 UI 状态（loading、modal、toast）

// 每个 Store 职责单一，依赖清晰
export const useUserStore = defineStore('user', () => {
  const currentUser = ref<User | null>(null)
  const token = ref<string>('')

  // 只关心用户相关逻辑
  async function login(credentials: Credentials) { /* ... */ }
  async function logout() { /* ... */ }

  return { currentUser, token, login, logout }
})

// stores/pages/home.ts       —— 首页特有状态
// stores/pages/product.ts    —— 产品详情页特有状态
// stores/pages/checkout.ts   —— 结账页特有状态

// ⚠️ 风险：页面间共享状态需要跨 Store 访问，容易产生循环依赖
// ✅ 适用：页面状态完全独立，不需要跨页面共享

// 拆分前：一个巨大的 Store
const useAppStore = defineStore('app', () => {
  // 用户相关（50 行）
  // 产品相关（80 行）
  // 购物车相关（60 行）
  // UI 状态（30 行）
  // 总共 220+ 行，职责混乱
})

// 拆分后：四个独立 Store
const useUserStore = defineStore('user', () => { /* 50 行 */ })
const useProductStore = defineStore('product', () => { /* 80 行 */ })
const useCartStore = defineStore('cart', () => { /* 60 行 */ })
const useUIStore = defineStore('ui', () => { /* 30 行 */ })

// 跨 Store 组合在 getter 中完成
const useCheckoutStore = defineStore('checkout', () => {
  const cart = useCartStore()
  const user = useUserStore()

  const canCheckout = computed(() =>
    !cart.isEmpty && user.currentUser !== null
  )

  return { canCheckout }
})

// ❌ SSR 不安全的 State
const unsafeState = () => ({
  date: new Date(),           // Date → 序列化后变成字符串
  regex: /pattern/,           // RegExp → 序列化后变成空对象 {}
  map: new Map(),             // Map → 序列化后变成空对象 {}
  set: new Set(),             // Set → 序列化后变成空对象 {}
  fn: () => {},               // 函数 → 序列化时丢失
  bigInt: BigInt(9007199254740991n), // BigInt → 序列化报错
  element: document.body,     // DOM 节点 → 循环引用，序列化报错
})

// ✅ SSR 安全的 State
const safeState = () => ({
  // 使用 ISO 字符串存储日期
  createdAt: '',              // 使用时 new Date(createdAt)

  // 使用普通对象替代 Map
  userMap: {} as Record<string, User>,

  // 使用数组替代 Set
  tagSet: [] as string[],     // 使用时 new Set(tagSet)

  // 使用可序列化的标记替代函数引用
  activeFilterType: 'all' as 'all' | 'active' | 'completed',

  // 基础类型和纯对象始终安全
  count: 0,
  name: '',
  items: [] as Item[],
  metadata: {} as Record<string, string>,
})

// utils/ssr-state.ts
// 自定义序列化器，处理常见非 JSON 安全类型
export function serializeState<T>(state: T): string {
  return JSON.stringify(state, (key, value) => {
    // Date → ISO string
    if (value instanceof Date) {
      return { __type: 'Date', value: value.toISOString() }
    }
    // RegExp → string pattern + flags
    if (value instanceof RegExp) {
      return { __type: 'RegExp', source: value.source, flags: value.flags }
    }
    // Map → entries 数组
    if (value instanceof Map) {
      return { __type: 'Map', entries: Array.from(value.entries()) }
    }
    // Set → values 数组
    if (value instanceof Set) {
      return { __type: 'Set', values: Array.from(value.values()) }
    }
    return value
  })
}

export function deserializeState<T>(json: string): T {
  return JSON.parse(json, (key, value) => {
    if (value && typeof value === 'object' && '__type' in value) {
      switch (value.__type) {
        case 'Date': return new Date(value.value)
        case 'RegExp': return new RegExp(value.source, value.flags)
        case 'Map': return new Map(value.entries)
        case 'Set': return new Set(value.values)
      }
    }
    return value
  })
}

// Nuxt 3 自动处理 Pinia state 的序列化
// 在服务端渲染完成后，state 被序列化到 __NUXT__ 全局变量
// 客户端 hydrate 时自动恢复

// 手动控制（如果需要）：
export default defineNuxtPlugin((nuxtApp) => {
  // 服务端：渲染完成后序列化
  if (import.meta.server) {
    nuxtApp.hook('app:rendered', () => {
      const state = useMainStore().$state
      nuxtApp.payload.piniaState = serializeState(state)
    })
  }

  // 客户端：hydrate 前恢复
  if (import.meta.client) {
    nuxtApp.hook('app:beforeMount', () => {
      if (nuxtApp.payload?.piniaState) {
        useMainStore().$state = deserializeState(nuxtApp.payload.piniaState)
      }
    })
  }
})

// 原生不可变更新（繁琐且易出错）
function updateNestedState(state: AppState, userId: string, newRole: string): AppState {
  return {
    ...state,
    users: {
      ...state.users,
      [userId]: {
        ...state.users[userId],
        role: newRole,
        permissions: {
          ...state.users[userId].permissions,
          updatedAt: Date.now()
        }
      }
    }
  }
}

// stores/immer-store.ts
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { produce, enableMapSet } from 'immer'

// 启用 Map/Set 支持
enableMapSet()

interface AppState {
  users: Record<string, {
    name: string
    role: string
    permissions: string[]
  }>
  settings: {
    theme: 'light' | 'dark'
    locale: string
  }
}

export const useImmerStore = defineStore('immer', () => {
  const state = ref<AppState>({
    users: {},
    settings: { theme: 'light', locale: 'zh-CN' }
  })

  // 封装 produce 为 store 方法
  function updateState(recipe: (draft: AppState) => void) {
    state.value = produce(state.value, recipe)
  }

  // 使用：简洁的不可变更新
  function updateUserRole(userId: string, newRole: string) {
    updateState((draft) => {
      // 直接修改 draft，Immer 自动生成不可变结果
      const user = draft.users[userId]
      if (user) {
        user.role = newRole
        user.permissions.push(`role:${newRole}`)
      }
    })
  }

  function toggleTheme() {
    updateState((draft) => {
      draft.settings.theme = draft.settings.theme === 'light' ? 'dark' : 'light'
    })
  }

  return { state, updateState, updateUserRole, toggleTheme }
})

// 封装为可复用的 Composable
// composables/useImmerState.ts
import { ref, type Ref } from 'vue'
import { produce, type Draft } from 'immer'

export function useImmerState<T extends object>(initialState: T) {
  const state = ref<T>(initialState) as Ref<T>

  function update(recipe: (draft: Draft<T>) => void) {
    state.value = produce(state.value, recipe)
  }

  // 返回只读 state 和更新函数
  return {
    state: readonly(state),
    update
  }
}

// 在 Setup Store 中使用
export const useTaskStore = defineStore('tasks', () => {
  const { state: tasks, update } = useImmerState<Task[]>([])

  function addTask(title: string) {
    update((draft) => {
      draft.push({
        id: crypto.randomUUID(),
        title,
        completed: false,
        createdAt: Date.now()
      })
    })
  }

  function toggleTask(id: string) {
    update((draft) => {
      const task = draft.find(t => t.id === id)
      if (task) task.completed = !task.completed
    })
  }

  return { tasks, addTask, toggleTask }
})

// ❌ 深层嵌套结构
interface NestedState {
  categories: Array<{
    id: string
    name: string
    products: Array<{
      id: string
      name: string
      price: number
      reviews: Array<{
        id: string
        userId: string
        rating: number
        comment: string
      }>
    }>
  }>
}

// 问题：
// 1. 更新一条 review 需要遍历 categories → products → reviews
// 2. 删除一个 product 需要找到其所属 category
// 3. 同一 product 出现在多个 category 时数据重复

// ✅ 范式化结构（类似数据库设计）
interface NormalizedState {
  // 实体表：以 ID 为 key
  categories: Record<string, {
    id: string
    name: string
    productIds: string[]  // 只存 ID 引用
  }>
  products: Record<string, {
    id: string
    name: string
    price: number
    categoryId: string
    reviewIds: string[]
  }>
  reviews: Record<string, {
    id: string
    userId: string
    productId: string
    rating: number
    comment: string
  }>
  // 列表：只存 ID 顺序
  categoryOrder: string[]
}

// 优势：
// 1. O(1) 查找任意实体
// 2. 更新只影响一个实体表
// 3. 无数据重复

// utils/normalize.ts
export function normalizeArray<T extends { id: string }>(
  items: T[]
): { byId: Record<string, T>; allIds: string[] } {
  const byId: Record<string, T> = {}
  const allIds: string[] = []

  for (const item of items) {
    byId[item.id] = item
    allIds.push(item.id)
  }

  return { byId, allIds }
}

// 在 Store 中使用
export const useProductStore = defineStore('products', () => {
  const byId = ref<Record<string, Product>>({})
  const allIds = ref<string[]>([])

  // Getter：还原为数组（用于列表渲染）
  const allProducts = computed(() =>
    allIds.value.map(id => byId.value[id]).filter(Boolean)
  )

  // Getter：按分类获取
  const productsByCategory = computed(() => {
    const map: Record<string, Product[]> = {}
    for (const id of allIds.value) {
      const product = byId.value[id]
      if (!product) continue
      const cat = product.categoryId
      if (!map[cat]) map[cat] = []
      map[cat].push(product)
    }
    return map
  })

  // Action：批量加载
  function loadProducts(products: Product[]) {
    const { byId: newById, allIds: newAllIds } = normalizeArray(products)
    // 合并而非替换（支持增量加载）
    byId.value = { ...byId.value, ...newById }
    allIds.value = [...new Set([...allIds.value, ...newAllIds])]
  }

  // Action：更新单个产品
  function updateProduct(id: string, updates: Partial<Product>) {
    if (byId.value[id]) {
      byId.value[id] = { ...byId.value[id], ...updates }
    }
  }

  return { byId, allIds, allProducts, productsByCategory, loadProducts, updateProduct }
})

// stores/slices/userSlice.ts
// 每个 slice 是一个独立的 composable
import { ref, computed, type Ref } from 'vue'

export interface UserSlice {
  currentUser: Ref<User | null>
  token: Ref<string>
  isLoggedIn: ComputedRef<boolean>
  login: (credentials: Credentials) => Promise<void>
  logout: () => void
}

export function createUserSlice(): UserSlice {
  const currentUser = ref<User | null>(null)
  const token = ref<string>('')

  const isLoggedIn = computed(() => currentUser.value !== null && token.value !== '')

  async function login(credentials: Credentials) {
    const response = await api.login(credentials)
    currentUser.value = response.user
    token.value = response.token
  }

  function logout() {
    currentUser.value = null
    token.value = ''
  }

  return { currentUser, token, isLoggedIn, login, logout }
}

// stores/slices/cartSlice.ts
import { ref, computed, type Ref, type ComputedRef } from 'vue'

export interface CartSlice {
  items: Ref<CartItem[]>
  itemCount: ComputedRef<number>
  total: ComputedRef<number>
  addItem: (product: Product) => void
  removeItem: (productId: string) => void
  clearCart: () => void
}

export function createCartSlice(): CartSlice {
  const items = ref<CartItem[]>([])

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

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

  function addItem(product: Product) {
    const existing = items.value.find(i => i.productId === product.id)
    if (existing) {
      existing.quantity++
    } else {
      items.value.push({
        id: crypto.randomUUID(),
        productId: product.id,
        name: product.name,
        price: product.price,
        quantity: 1
      })
    }
  }

  function removeItem(productId: string) {
    items.value = items.value.filter(i => i.productId !== productId)
  }

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

  return { items, itemCount, total, addItem, removeItem, clearCart }
}

// stores/appStore.ts
// 组合所有 slice 为一个完整的 Store
import { defineStore } from 'pinia'
import { createUserSlice } from './slices/userSlice'
import { createCartSlice } from './slices/cartSlice'
import { createUISlice } from './slices/uiSlice'

export const useAppStore = defineStore('app', () => {
  // 每个 slice 独立创建和管理
  const user = createUserSlice()
  const cart = createCartSlice()
  const ui = createUISlice()

  // 跨 slice 的组合 getter
  const canCheckout = computed(() =>
    user.isLoggedIn.value && cart.items.value.length > 0
  )

  // 跨 slice 的组合 action
  async function checkout() {
    if (!canCheckout.value) return

    ui.setLoading(true)
    try {
      await api.createOrder({
        userId: user.currentUser.value!.id,
        items: cart.items.value,
        total: cart.total.value
      })
      cart.clearCart()
      ui.showToast('订单创建成功', 'success')
    } catch (error) {
      ui.showToast('订单创建失败', 'error')
    } finally {
      ui.setLoading(false)
    }
  }

  return {
    // 展开所有 slice 的属性
    ...user,
    ...cart,
    ...ui,
    // 跨 slice 的组合
    canCheckout,
    checkout
  }
})

export const useStore = defineStore('store', {
  state: () => ({
    items: [] as Item[]
  }),

  getters: {
    // ❌ 返回函数：每次调用都执行查找
    getById: (state) => (id: string) => {
      // 这个函数每次被调用都执行
      // computed 缓存的是"返回的函数"，而不是"查找结果"
      return state.items.find(item => item.id === id)
    }
  }
})

// 在组件中使用
const store = useStore()

// 每次渲染都执行 find
const item = store.getById('some-id')  // 执行 find
const sameItem = store.getById('some-id')  // 再次执行 find！

// 更糟的是在模板中：
// <div v-for="id in ids" :key="id">
//   {{ store.getById(id)?.name }}
// </div>
// 每次重新渲染，所有 getById 调用都重新执行

// computed 的缓存机制
const getById = computed(() => {
  // computed 追踪的是这个外层函数的依赖
  // 依赖只有 state.items
  return (id: string) => {
    // 这个内层函数不是响应式上下文
    // 它的执行不受 computed 缓存控制
    return state.items.find(item => item.id === id)
  }
})

// 缓存的是"函数引用"，不是"查找结果"
// 只要 state.items 不变，getById.value 返回同一个函数
// 但每次调用这个函数都会重新执行 find

export const useProductStore = defineStore('products', () => {
  const products = ref<Product[]>([])

  // ✅ 方案1：预计算索引 Map（适合多 key 查询）
  const productIndex = computed(() => {
    const byId = new Map<string, Product>()
    const byCategory = new Map<string, Product[]>()
    const byStatus = new Map<string, Product[]>()

    for (const product of products.value) {
      // ID 索引
      byId.set(product.id, product)

      // 分类索引
      const catList = byCategory.get(product.category) ?? []
      catList.push(product)
      byCategory.set(product.category, catList)

      // 状态索引
      const statusList = byStatus.get(product.status) ?? []
      statusList.push(product)
      byStatus.set(product.status, statusList)
    }

    return { byId, byCategory, byStatus }
  })

  // O(1) 查询
  function getById(id: string): Product | undefined {
    return productIndex.value.byId.get(id)
  }

  function getByCategory(category: string): Product[] {
    return productIndex.value.byCategory.get(category) ?? []
  }

  return { products, productIndex, getById, getByCategory }
})

// 场景：10000 条产品数据，在列表中渲染时频繁按 ID 查找

// 方案A：返回函数的 getter（无缓存）
// 每次查找 O(n)，100 次查找 = 100 * 10000 = 1,000,000 次比较

// 方案B：预计算 Map（有缓存）
// 构建 Map O(n)，每次查找 O(1)，100 次查找 = 10000 + 100 = 10,100 次操作
// 性能提升约 100 倍

// ✅ 方案2：LRU 缓存 Getter（适合查询模式分散的场景）
function createCachedGetter<T, K>(
  source: () => T[],
  keyFn: (item: T) => string,
  maxSize = 100
) {
  const cache = new Map<string, T>()

  return computed(() => {
    const items = source()
    // 重建缓存（仅在源数据变化时）
    cache.clear()
    for (const item of items) {
      const key = keyFn(item)
      if (cache.size < maxSize) {
        cache.set(key, item)
      }
    }
    return {
      get: (key: string) => cache.get(key),
      has: (key: string) => cache.has(key),
      size: cache.size
    }
  })
}

// 使用
export const useStore = defineStore('store', () => {
  const items = ref<Item[]>([])

  const itemCache = createCachedGetter(
    () => items.value,
    (item) => item.id,
    500
  )

  return { items, itemCache }
})

// stores/user.ts
export const useUserStore = defineStore('user', () => {
  const preferences = ref<UserPreferences>({})
  const permissions = ref<string[]>([])
  return { preferences, permissions }
})

// stores/product.ts
export const useProductStore = defineStore('product', () => {
  const products = ref<Product[]>([])
  return { products }
})

// stores/checkout.ts —— 跨 Store Getter
export const useCheckoutStore = defineStore('checkout', () => {
  // ⚠️ 每次访问 availableProducts 都会调用 useUserStore 和 useProductStore
  //    但 computed 会缓存结果，只在依赖变化时重新计算
  const availableProducts = computed(() => {
    const user = useUserStore()
    const product = useProductStore()

    return product.products.filter(p => {
      // 根据用户权限过滤
      return user.permissions.includes(`product:${p.id}`)
    })
  })

  return { availableProducts }
})

useCheckoutStore.availableProducts
  ├── useUserStore.permissions    (Ref)
  └── useProductStore.products    (Ref)
        └── 每个 product 的 id    (reactive 属性)

// ✅ 对于昂贵的跨 Store 计算，考虑缓存中间结果
export const useCheckoutStore = defineStore('checkout', () => {
  // 第一步：缓存权限 Set（O(1) 查找）
  const permissionSet = computed(() => {
    const user = useUserStore()
    return new Set(user.permissions)
  })

  // 第二步：使用缓存的 Set 进行过滤
  const availableProducts = computed(() => {
    const product = useProductStore()
    const perms = permissionSet.value

    return product.products.filter(p =>
      perms.has(`product:${p.id}`)
    )
  })

  return { availableProducts }
})

// 决策树
// ┌─ 数据是否被多个组件使用？
// │   ├─ 是 → 放在 Store Getter 中
// │   └─ 否 → 继续判断
// │       ├─ 计算是否依赖 Store 数据？
// │       │   ├─ 是 → 可以放 Getter（便于测试和复用）
// │       │   └─ 否 → 放在组件内 computed
// │       └─ 计算逻辑是否复杂？
// │           ├─ 是 → 放 Getter（便于单元测试）
// │           └─ 否 → 放组件内（就近原则）

// 对比示例
export const useTaskStore = defineStore('tasks', () => {
  const tasks = ref<Task[]>([])
  const filter = ref<'all' | 'active' | 'completed'>('all')
  const searchQuery = ref('')

  // ✅ 放 Getter：被多个组件使用
  const filteredTasks = computed(() => {
    let result = tasks.value

    if (filter.value === 'active') {
      result = result.filter(t => !t.completed)
    } else if (filter.value === 'completed') {
      result = result.filter(t => t.completed)
    }

    if (searchQuery.value) {
      const q = searchQuery.value.toLowerCase()
      result = result.filter(t => t.title.toLowerCase().includes(q))
    }

    return result
  })

  // ✅ 放 Getter：复杂计算，可单独测试
  const taskStats = computed(() => ({
    total: tasks.value.length,
    active: tasks.value.filter(t => !t.completed).length,
    completed: tasks.value.filter(t => t.completed).length,
    completionRate: tasks.value.length > 0
      ? tasks.value.filter(t => t.completed).length / tasks.value.length
      : 0
  }))

  return { tasks, filter, searchQuery, filteredTasks, taskStats }
})

// 在组件中
const TaskList = defineComponent({
  setup() {
    const taskStore = useTaskStore()

    // ✅ 放组件内：仅此组件使用的 UI 状态计算
    const isListEmpty = computed(() => taskStore.filteredTasks.length === 0)
    const placeholder = computed(() =>
      isListEmpty.value ? '暂无任务' : '搜索任务...'
    )

    // ✅ 放组件内：依赖组件本地状态
    const localFilter = ref('')
    const localFiltered = computed(() =>
      taskStore.filteredTasks.filter(t => t.title.includes(localFilter.value))
    )

    return { isListEmpty, placeholder, localFilter, localFiltered }
  }
})

// benchmark/patch-benchmark.ts
// 测试环境：10000 个属性的 Store，每个属性更新 100 次

interface BenchmarkResult {
  name: string
  totalTime: number
  avgPerOperation: number
  triggerCount: number
}

function runBenchmark(): BenchmarkResult[] {
  const results: BenchmarkResult[] = []

  // ───── 场景1：逐个更新 ─────
  const store1 = useLargeStore()
  let triggerCount1 = 0
  store1.$subscribe(() => { triggerCount1++ })

  const start1 = performance.now()
  for (let i = 0; i < 100; i++) {
    store1.field1 = i
    store1.field2 = `value-${i}`
    store1.field3 = { id: i, name: `item-${i}` }
    store1.field4 = i * 2
    store1.field5 = i % 2 === 0
  }
  const end1 = performance.now()

  results.push({
    name: '逐个更新 (5 fields × 100)',
    totalTime: end1 - start1,
    avgPerOperation: (end1 - start1) / 500,
    triggerCount: triggerCount1
  })

  // ───── 场景2：$patch 对象模式 ─────
  const store2 = useLargeStore()
  let triggerCount2 = 0
  store2.$subscribe(() => { triggerCount2++ })

  const start2 = performance.now()
  for (let i = 0; i < 100; i++) {
    store2.$patch({
      field1: i,
      field2: `value-${i}`,
      field3: { id: i, name: `item-${i}` },
      field4: i * 2,
      field5: i % 2 === 0
    })
  }
  const end2 = performance.now()

  results.push({
    name: '$patch 对象模式 (5 fields × 100)',
    totalTime: end2 - start2,
    avgPerOperation: (end2 - start2) / 100,
    triggerCount: triggerCount2
  })

  // ───── 场景3：$patch 函数模式 ─────
  const store3 = useLargeStore()
  let triggerCount3 = 0
  store3.$subscribe(() => { triggerCount3++ })

  const start3 = performance.now()
  for (let i = 0; i < 100; i++) {
    store3.$patch((state) => {
      state.field1 = i
      state.field2 = `value-${i}`
      state.field3 = { id: i, name: `item-${i}` }
      state.field4 = i * 2
      state.field5 = i % 2 === 0
    })
  }
  const end3 = performance.now()

  results.push({
    name: '$patch 函数模式 (5 fields × 100)',
    totalTime: end3 - start3,
    avgPerOperation: (end3 - start3) / 100,
    triggerCount: triggerCount3
  })

  return results
}

// benchmark/shallowRef-benchmark.ts
interface ListItem {
  id: number
  name: string
  value: number
  timestamp: number
  tags: string[]
}

function generateList(size: number): ListItem[] {
  return Array.from({ length: size }, (_, i) => ({
    id: i,
    name: `Item ${i}`,
    value: Math.random() * 1000,
    timestamp: Date.now(),
    tags: ['tag-a', 'tag-b', 'tag-c']
  }))
}

// ───── 测试1：ref（深度响应式）─────
function benchmarkRef(size: number) {
  const list = ref<ListItem[]>(generateList(size))

  const start = performance.now()

  // 整体替换列表
  list.value = generateList(size)

  const replaceTime = performance.now() - start

  // 修改单个元素
  const modifyStart = performance.now()
  list.value[0] = { ...list.value[0], value: Math.random() * 1000 }
  const modifyTime = performance.now() - modifyStart

  return { replaceTime, modifyTime }
}

// ───── 测试2：shallowRef（浅层响应式）─────
function benchmarkShallowRef(size: number) {
  const list = shallowRef<ListItem[]>(generateList(size))

  const start = performance.now()

  // 整体替换列表（需要触发响应式）
  list.value = generateList(size)

  // shallowRef 需要手动触发更新
  triggerRef(list)
  const replaceTime = performance.now() - start

  // 修改单个元素（不触发深度追踪）
  const modifyStart = performance.now()
  const newList = [...list.value]
  newList[0] = { ...newList[0], value: Math.random() * 1000 }
  list.value = newList
  const modifyTime = performance.now() - modifyStart

  return { replaceTime, modifyTime }
}

// ✅ 适合 shallowRef 的场景
// 1. 大型列表/表格数据（只整体替换，不修改内部元素）
// 2. 从 API 获取的不可变数据
// 3. 第三方库产生的复杂对象（如 ECharts 配置）

// ❌ 不适合 shallowRef 的场景
// 1. 需要直接修改嵌套属性的数据
// 2. 表单数据（频繁修改内部字段）
// 3. 需要深度 watch 的数据

// benchmark/storeToRefs-benchmark.ts
function benchmarkAccessPatterns(iterations: number) {
  const store = useLargeStore()

  // ───── 模式1：直接访问 store.xxx ─────
  const start1 = performance.now()
  for (let i = 0; i < iterations; i++) {
    const a = store.field1
    const b = store.field2
    const c = store.field3
    const d = store.field4
    const e = store.field5
  }
  const directTime = performance.now() - start1

  // ───── 模式2：storeToRefs 后访问 .value ─────
  const { field1, field2, field3, field4, field5 } = storeToRefs(store)
  const start2 = performance.now()
  for (let i = 0; i < iterations; i++) {
    const a = field1.value
    const b = field2.value
    const c = field3.value
    const d = field4.value
    const e = field5.value
  }
  const refsTime = performance.now() - start2

  // ───── 模式3：模板渲染模拟 ─────
  // 在模板中：{{ store.field1 }} vs {{ field1 }}
  // 两者性能几乎一致，因为模板编译后都是属性访问

  return { directTime, refsTime }
}

// 选择指南
// ✅ 使用 storeToRefs 的场景：
// - 需要在 setup 中解构多个属性
// - 需要将属性传递给 composable
// - 需要 watch 单个属性

// ✅ 直接访问 store.xxx 的场景：
// - 只访问少量属性
// - 在模板中使用（两种方式性能相同）
// - 需要调用 actions（actions 不需要 storeToRefs）

// plugins/pinia-persist.ts
import type { PiniaPluginContext, StateTree, SubscriptionCallbackMutation } from 'pinia'
import { watch } from 'vue'

// ==================== 类型定义 ====================
interface PersistStrategy {
  key?: string
  storage?: Storage
  paths?: string[]           // 白名单：只持久化这些字段
  omit?: string[]            // 黑名单：排除这些字段
  beforeRestore?: (context: PiniaPluginContext) => void
  afterRestore?: (context: PiniaPluginContext) => void
  serializer?: {
    serialize: (value: StateTree) => string
    deserialize: (value: string) => StateTree
  }
  version?: number           // 数据版本号
  migrate?: (state: any, version: number) => any  // 版本迁移函数
  encrypt?: {
    encrypt: (data: string) => string
    decrypt: (data: string) => string
  }
  debounce?: number          // 防抖时间（ms）
}

interface PersistOptions {
  enabled: boolean
  strategies?: PersistStrategy[]
}

declare module 'pinia' {
  export interface DefineStoreOptionsBase<S extends StateTree, Store> {
    persist?: PersistOptions | boolean
  }
}

// ==================== 默认序列化器 ====================
const defaultSerializer = {
  serialize: JSON.stringify,
  deserialize: JSON.parse
}

// ==================== 核心插件 ====================
export function createPersistPlugin(
  globalOptions?: Partial<PersistStrategy>
): (context: PiniaPluginContext) => void {

  return function piniaPersistPlugin(context: PiniaPluginContext) {
    const { store, options } = context

    // 获取 persist 配置
    const persist = options.persist
    if (persist === undefined || persist === false) return

    const strategies: PersistStrategy[] = persist === true
      ? [{ key: store.$id }]
      : (persist as PersistOptions).strategies ?? [{ key: store.$id }]

    // 为每个策略注册持久化逻辑
    for (const strategy of strategies) {
      const {
        key = store.$id,
        storage = localStorage,
        paths = null,
        omit = null,
        serializer = defaultSerializer,
        version,
        migrate,
        encrypt,
        debounce = 0,
        beforeRestore,
        afterRestore
      } = { ...globalOptions, ...strategy }

      // ───── 1. 恢复持久化数据 ─────
      try {
        const raw = storage.getItem(key)
        if (raw) {
          // 解密
          let decrypted = raw
          if (encrypt) {
            decrypted = encrypt.decrypt(raw)
          }

          // 反序列化
          let data = serializer.deserialize(decrypted)

          // 版本迁移
          if (version !== undefined && migrate) {
            const dataVersion = data.__version ?? 0
            if (dataVersion < version) {
              data = migrate(data, dataVersion)
              data.__version = version
            }
          }

          // 恢复前钩子
          beforeRestore?.(context)

          // 应用数据
          if (paths) {
            // 白名单模式：只恢复指定字段
            for (const path of paths) {
              if (path in data) {
                store.$patch({ [path]: data[path] })
              }
            }
          } else if (omit) {
            // 黑名单模式：恢复除指定字段外的所有字段
            const filtered: Record<string, unknown> = {}
            for (const key in data) {
              if (!omit.includes(key) && key !== '__version') {
                filtered[key] = data[key]
              }
            }
            store.$patch(filtered)
          } else {
            // 全量恢复
            store.$patch(data)
          }

          // 恢复后钩子
          afterRestore?.(context)
        }
      } catch (error) {
        console.error(`[pinia-persist] 恢复 ${key} 失败:`, error)
        // 清除损坏的数据
        storage.removeItem(key)
      }

      // ───── 2. 监听变化并持久化 ─────
      let debounceTimer: ReturnType<typeof setTimeout> | null = null

      const persistData = () => {
        try {
          // 提取需要持久化的数据
          let data: Record<string, unknown>
          const fullState = store.$state as Record<string, unknown>

          if (paths) {
            // 白名单模式
            data = {}
            for (const path of paths) {
              if (path in fullState) {
                data[path] = fullState[path]
              }
            }
          } else if (omit) {
            // 黑名单模式
            data = {}
            for (const key in fullState) {
              if (!omit.includes(key)) {
                data[key] = fullState[key]
              }
            }
          } else {
            // 全量持久化
            data = { ...fullState }
          }

          // 添加版本号
          if (version !== undefined) {
            data.__version = version
          }

          // 序列化
          let serialized = serializer.serialize(data as StateTree)

          // 加密
          if (encrypt) {
            serialized = encrypt.encrypt(serialized)
          }

          // 存储
          storage.setItem(key, serialized)
        } catch (error) {
          console.error(`[pinia-persist] 持久化 ${key} 失败:`, error)
        }
      }

      // 使用 $subscribe 监听变化
      store.$subscribe(
        (_mutation: SubscriptionCallbackMutation<any>, _state: any) => {
          if (debounce > 0) {
            // 防抖模式
            if (debounceTimer) clearTimeout(debounceTimer)
            debounceTimer = setTimeout(persistData, debounce)
          } else {
            persistData()
          }
        },
        { detached: true }
      )
    }
  }
}

// main.ts
import { createPinia } from 'pinia'
import { createPersistPlugin } from './plugins/pinia-persist'

const pinia = createPinia()

// 安装插件（可传入全局默认配置）
pinia.use(createPersistPlugin({
  storage: localStorage,
  debounce: 300  // 全局默认防抖 300ms
}))

// ───── Store 中使用 ─────
// stores/user.ts
export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: null as UserInfo | null,
    preferences: {
      theme: 'light' as 'light' | 'dark',
      locale: 'zh-CN'
    },
    // 敏感数据，不应持久化
    tempCode: ''
  }),

  // 选择性持久化：白名单模式
  persist: {
    enabled: true,
    strategies: [
      {
        key: 'user-store',
        storage: localStorage,
        paths: ['token', 'userInfo', 'preferences'],  // 只持久化这些
        version: 2,
        migrate: (state, oldVersion) => {
          // v1 → v2：preferences 结构变更
          if (oldVersion < 2) {
            state.preferences = {
              theme: state.theme ?? 'light',
              locale: state.locale ?? 'zh-CN'
            }
          }
          return state
        }
      }
    ]
  }
})

// stores/settings.ts —— 黑名单模式
export const useSettingsStore = defineStore('settings', {
  state: () => ({
    apiBaseUrl: '/api',
    timeout: 5000,
    retryCount: 3,
    debugMode: false,
    // 运行时状态，不持久化
    requestCount: 0,
    lastRequestTime: 0
  }),

  persist: {
    enabled: true,
    strategies: [
      {
        key: 'app-settings',
        omit: ['requestCount', 'lastRequestTime']  // 排除运行时状态
      }
    ]
  }
})

// utils/crypto-storage.ts
// 使用 Web Crypto API 进行客户端加密

class CryptoStorage {
  private encoder = new TextEncoder()
  private decoder = new TextDecoder()

  // 从密码派生加密密钥
  async deriveKey(password: string, salt?: Uint8Array): Promise<{
    key: CryptoKey
    salt: Uint8Array
  }> {
    // 生成或使用提供的 salt
    const keySalt = salt ?? crypto.getRandomValues(new Uint8Array(16))

    // 导入密码为 CryptoKey
    const baseKey = await crypto.subtle.importKey(
      'raw',
      this.encoder.encode(password),
      'PBKDF2',
      false,
      ['deriveKey']
    )

    // 派生 AES-GCM 密钥
    const key = await crypto.subtle.deriveKey(
      {
        name: 'PBKDF2',
        salt: keySalt,
        iterations: 100000,
        hash: 'SHA-256'
      },
      baseKey,
      { name: 'AES-GCM', length: 256 },
      false,
      ['encrypt', 'decrypt']
    )

    return { key, salt: keySalt }
  }

  // 加密
  async encrypt(plaintext: string, password: string): Promise<string> {
    const { key, salt } = await this.deriveKey(password)
    const iv = crypto.getRandomValues(new Uint8Array(12))

    const encrypted = await crypto.subtle.encrypt(
      { name: 'AES-GCM', iv },
      key,
      this.encoder.encode(plaintext)
    )

    // 将 salt + iv + 密文 打包为 Base64
    const packed = new Uint8Array(salt.length + iv.length + encrypted.byteLength)
    packed.set(salt, 0)
    packed.set(iv, salt.length)
    packed.set(new Uint8Array(encrypted), salt.length + iv.length)

    return btoa(String.fromCharCode(...packed))
  }

  // 解密
  async decrypt(packedData: string, password: string): Promise<string> {
    const packed = Uint8Array.from(atob(packedData), c => c.charCodeAt(0))

    const salt = packed.slice(0, 16)
    const iv = packed.slice(16, 28)
    const ciphertext = packed.slice(28)

    const { key } = await this.deriveKey(password, salt)

    const decrypted = await crypto.subtle.decrypt(
      { name: 'AES-GCM', iv },
      key,
      ciphertext
    )

    return this.decoder.decode(decrypted)
  }
}

// 集成到持久化插件
export const cryptoStorage = new CryptoStorage()

// 使用示例
export const useSecureStore = defineStore('secure', {
  state: () => ({
    apiKey: '',
    secretToken: ''
  }),

  persist: {
    enabled: true,
    strategies: [
      {
        key: 'secure-data',
        encrypt: {
          encrypt: (data: string) => {
            // 同步包装异步加密（实际项目中应使用密码输入）
            // 这里展示集成方式
            let result = ''
            cryptoStorage.encrypt(data, 'user-provided-password').then(r => { result = r })
            return result
          },
          decrypt: (data: string) => {
            let result = ''
            cryptoStorage.decrypt(data, 'user-provided-password').then(r => { result = r })
            return result
          }
        }
      }
    ]
  }
})

// plugins/migration-strategies.ts
// 集中管理所有 Store 的迁移逻辑

interface Migration {
  version: number
  up: (state: any) => any
}

const migrations: Record<string, Migration[]> = {
  'user': [
    {
      version: 2,
      up: (state) => ({
        ...state,
        preferences: {
          theme: state.theme ?? 'light',
          locale: state.locale ?? 'zh-CN',
          notifications: state.notifications ?? true
        }
      })
    },
    {
      version: 3,
      up: (state) => {
        // v2 → v3：token 拆分为 accessToken + refreshToken
        const { token, ...rest } = state
        return {
          ...rest,
          accessToken: token ?? '',
          refreshToken: ''
        }
      }
    }
  ],
  'cart': [
    {
      version: 2,
      up: (state) => ({
        ...state,
        items: (state.items ?? []).map((item: any) => ({
          ...item,
          // 添加新字段
          addedAt: item.addedAt ?? Date.now(),
          variantId: item.variantId ?? null
        }))
      })
    }
  ]
}

// 通用迁移执行器
export function applyMigrations(
  storeId: string,
  data: any,
  fromVersion: number,
  toVersion: number
): any {
  const storeMigrations = migrations[storeId]
  if (!storeMigrations) return data

  let result = { ...data }

  for (const migration of storeMigrations) {
    if (migration.version > fromVersion && migration.version <= toVersion) {
      console.log(`[migration] ${storeId}: v${fromVersion} → v${migration.version}`)
      result = migration.up(result)
      fromVersion = migration.version
    }
  }

  return result
}