Pinia Store模块化 #

// stores/index.ts - Store入口文件
import { createPinia, defineStore } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

// 在应用中使用Pinia
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

// stores/user.ts
export const useUserStore = defineStore('user', {
  state: () => ({
    profile: null as User | null,
    loading: false,
    error: null as string | null
  }),
  
  getters: {
    isAuthenticated: (state) => !!state.profile,
    isAdmin: (state) => state.profile?.role === 'admin',
    displayName: (state) => state.profile?.name || 'Guest'
  },
  
  actions: {
    async login(credentials: LoginCredentials) {
      this.loading = true
      try {
        const response = await fetch('/api/auth/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(credentials)
        })
        
        if (!response.ok) throw new Error('Login failed')
        
        this.profile = await response.json()
      } catch (error) {
        this.error = (error as Error).message
      } finally {
        this.loading = false
      }
    },
    
    logout() {
      this.profile = null
    }
  }
})

// stores/products.ts
export const useProductStore = defineStore('products', {
  state: () => ({
    items: [] as Product[],
    categories: [] as Category[],
    loading: false,
    error: null as string | null
  }),
  
  getters: {
    featuredProducts: (state) => state.items.filter(p => p.featured),
    productsByCategory: (state) => (categoryId: string) => 
      state.items.filter(p => p.categoryId === categoryId),
    categoryMap: (state) => new Map(state.categories.map(cat => [cat.id, cat]))
  },
  
  actions: {
    async loadProducts() {
      this.loading = true
      try {
        const response = await fetch('/api/products')
        this.items = await response.json()
      } catch (error) {
        this.error = (error as Error).message
      } finally {
        this.loading = false
      }
    },
    
    async loadCategories() {
      try {
        const response = await fetch('/api/categories')
        this.categories = await response.json()
      } catch (error) {
        this.error = (error as Error).message
      }
    }
  }
})

// stores/cart.ts
export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [] as CartItem[],
    discount: 0,
    shipping: 0
  }),
  
  getters: {
    subtotal: (state) => 
      state.items.reduce((sum, item) => sum + item.price * item.quantity, 0),
    total: (state) => Math.max(0, this.subtotal - state.discount + state.shipping)
  },
  
  actions: {
    addToCart(product: Product, quantity: number = 1) {
      const existingItem = this.items.find(item => item.productId === product.id)
      if (existingItem) {
        existingItem.quantity += quantity
      } else {
        this.items.push({
          productId: product.id,
          name: product.name,
          price: product.price,
          quantity
        })
      }
    },
    
    removeFromCart(productId: string) {
      this.items = this.items.filter(item => item.productId !== productId)
    },
    
    updateQuantity(productId: string, quantity: number) {
      if (quantity <= 0) {
        this.removeFromCart(productId)
        return
      }
      
      const item = this.items.find(i => i.productId === productId)
      if (item) {
        item.quantity = quantity
      }
    }
  }
})

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

interface LoginCredentials {
  email: string
  password: string
}

interface Product {
  id: string
  name: string
  price: number
  categoryId: string
  featured: boolean
}

interface Category {
  id: string
  name: string
  description: string
}

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

// stores/orders.ts
import { defineStore } from 'pinia'
import { useUserStore } from './user'
import { useCartStore } from './cart'

export const useOrderStore = defineStore('orders', {
  state: () => ({
    orders: [] as Order[],
    currentOrder: null as Order | null,
    loading: false,
    error: null as string | null
  }),
  
  getters: {
    userOrders: (state) => {
      const userStore = useUserStore()
      if (!userStore.profile) return []
      return state.orders.filter(order => order.userId === userStore.profile!.id)
    },
    
    orderTotal: (state) => {
      if (!state.currentOrder) return 0
      return state.currentOrder.items.reduce(
        (sum, item) => sum + item.price * item.quantity, 
        0
      )
    }
  },
  
  actions: {
    // 创建订单时访问购物车和用户Store
    async createOrder() {
      const userStore = useUserStore()
      const cartStore = useCartStore()
      
      // 验证用户是否已登录
      if (!userStore.isAuthenticated) {
        throw new Error('User must be authenticated to create an order')
      }
      
      // 验证购物车是否为空
      if (cartStore.items.length === 0) {
        throw new Error('Cannot create order with empty cart')
      }
      
      this.loading = true
      try {
        // 创建订单对象，使用购物车数据
        const orderData: CreateOrderRequest = {
          userId: userStore.profile!.id,
          items: cartStore.items.map(item => ({
            productId: item.productId,
            quantity: item.quantity,
            price: item.price
          })),
          total: cartStore.total,
          status: 'pending'
        }
        
        const response = await fetch('/api/orders', {
          method: 'POST',
          headers: { 
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${userStore.profile!.token}` // 假设有token
          },
          body: JSON.stringify(orderData)
        })
        
        if (!response.ok) throw new Error('Failed to create order')
        
        const newOrder = await response.json()
        this.orders.push(newOrder)
        this.currentOrder = newOrder
        
        // 清空购物车
        cartStore.items = []
        
        return newOrder
      } catch (error) {
        this.error = (error as Error).message
        throw error
      } finally {
        this.loading = false
      }
    },
    
    // 获取用户订单
    async fetchUserOrders() {
      const userStore = useUserStore()
      
      if (!userStore.isAuthenticated) {
        throw new Error('User must be authenticated to fetch orders')
      }
      
      this.loading = true
      try {
        const response = await fetch(`/api/users/${userStore.profile!.id}/orders`)
        if (!response.ok) throw new Error('Failed to fetch orders')
        
        this.orders = await response.json()
      } catch (error) {
        this.error = (error as Error).message
      } finally {
        this.loading = false
      }
    },
    
    // 订单状态变更
    async updateOrderStatus(orderId: string, status: OrderStatus) {
      const userStore = useUserStore()
      
      const orderIndex = this.orders.findIndex(o => o.id === orderId)
      if (orderIndex === -1) {
        throw new Error('Order not found')
      }
      
      // 验证用户权限（如果是管理员或者订单拥有者）
      const order = this.orders[orderIndex]
      if (!userStore.isAdmin && order.userId !== userStore.profile?.id) {
        throw new Error('Unauthorized to update this order')
      }
      
      this.loading = true
      try {
        const response = await fetch(`/api/orders/${orderId}/status`, {
          method: 'PATCH',
          headers: { 
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${userStore.profile?.token}`
          },
          body: JSON.stringify({ status })
        })
        
        if (!response.ok) throw new Error('Failed to update order status')
        
        // 更新本地状态
        this.orders[orderIndex] = { ...this.orders[orderIndex], status }
        if (this.currentOrder?.id === orderId) {
          this.currentOrder = { ...this.currentOrder, status }
        }
      } catch (error) {
        this.error = (error as Error).message
      } finally {
        this.loading = false
      }
    }
  }
})

interface Order {
  id: string
  userId: string
  items: OrderItem[]
  total: number
  status: OrderStatus
  createdAt: string
  updatedAt: string
}

interface OrderItem {
  productId: string
  quantity: number
  price: number
}

interface CreateOrderRequest {
  userId: string
  items: OrderItem[]
  total: number
  status: OrderStatus
}

type OrderStatus = 'pending' | 'processing' | 'shipped' | 'delivered' | 'cancelled'

// stores/dashboard.ts
import { defineStore } from 'pinia'
import { useUserStore } from './user'
import { useProductStore } from './products'
import { useOrderStore } from './orders'
import { useCartStore } from './cart'

export const useDashboardStore = defineStore('dashboard', {
  state: () => ({
    loading: false,
    error: null as string | null,
    lastUpdated: null as number | null
  }),
  
  getters: {
    // 组合多个Store的数据
    dashboardStats: (state) => {
      const userStore = useUserStore()
      const productStore = useProductStore()
      const orderStore = useOrderStore()
      const cartStore = useCartStore()
      
      return {
        user: {
          isLoggedIn: userStore.isAuthenticated,
          isAdmin: userStore.isAdmin,
          name: userStore.displayName
        },
        products: {
          total: productStore.items.length,
          featured: productStore.featuredProducts.length
        },
        orders: {
          total: orderStore.orders.length,
          userOrders: userStore.profile ? orderStore.userOrders.length : 0
        },
        cart: {
          items: cartStore.items.length,
          total: cartStore.total
        }
      }
    },
    
    // 计算用户活动摘要
    userActivitySummary: (state) => {
      const userStore = useUserStore()
      const orderStore = useOrderStore()
      
      if (!userStore.profile) return null
      
      const userOrders = orderStore.orders.filter(
        order => order.userId === userStore.profile!.id
      )
      
      const totalSpent = userOrders.reduce(
        (sum, order) => sum + order.total, 
        0
      )
      
      const lastOrder = userOrders.length > 0 
        ? userOrders.reduce((latest, order) => 
            new Date(order.createdAt) > new Date(latest.createdAt) ? order : latest
          )
        : null
      
      return {
        totalOrders: userOrders.length,
        totalSpent,
        averageOrderValue: userOrders.length > 0 ? totalSpent / userOrders.length : 0,
        lastOrderDate: lastOrder?.createdAt,
        favoriteCategories: this.getFavoriteCategories(userOrders)
      }
    }
  },
  
  actions: {
    // 同时加载多个Store的数据
    async loadDashboardData() {
      this.loading = true
      this.error = null
      
      try {
        const userStore = useUserStore()
        const productStore = useProductStore()
        const orderStore = useOrderStore()
        
        // 并行加载数据
        await Promise.all([
          userStore.profile ? Promise.resolve() : userStore.loadUserProfile?.(),
          productStore.items.length === 0 ? productStore.loadProducts() : Promise.resolve(),
          userStore.profile ? orderStore.fetchUserOrders() : Promise.resolve()
        ])
        
        this.lastUpdated = Date.now()
      } catch (error) {
        this.error = (error as Error).message
        console.error('Dashboard data loading failed:', error)
      } finally {
        this.loading = false
      }
    },
    
    // 从订单数据计算最喜欢的商品类别
    getFavoriteCategories(orders: Order[]): string[] {
      const categoryCount = new Map<string, number>()
      const productStore = useProductStore()
      
      orders.forEach(order => {
        order.items.forEach(item => {
          const product = productStore.items.find(p => p.id === item.productId)
          if (product) {
            const category = productStore.categoryMap.get(product.categoryId)?.name
            if (category) {
              categoryCount.set(category, (categoryCount.get(category) || 0) + 1)
            }
          }
        })
      })
      
      // 返回按购买次数排序的类别
      return Array.from(categoryCount.entries())
        .sort((a, b) => b[1] - a[1])
        .map(([category]) => category)
        .slice(0, 5) // 只返回前5个
    },
    
    // 刷新特定数据
    async refreshOrders() {
      const orderStore = useOrderStore()
      await orderStore.fetchUserOrders()
      this.lastUpdated = Date.now()
    },
    
    async refreshProducts() {
      const productStore = useProductStore()
      await productStore.loadProducts()
      this.lastUpdated = Date.now()
    }
  }
})

// stores/modules/auth.ts
import { defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    token: localStorage.getItem('token'),
    refreshToken: localStorage.getItem('refreshToken'),
    user: null as User | null,
    loading: false,
    error: null as string | null
  }),
  
  getters: {
    isAuthenticated: (state) => !!state.token,
    hasValidSession: (state) => {
      if (!state.token) return false
      // 这里可以添加token有效性检查
      return true
    }
  },
  
  actions: {
    async login(credentials: LoginCredentials) {
      this.loading = true
      this.error = null
      
      try {
        const response = await fetch('/api/auth/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(credentials)
        })
        
        if (!response.ok) {
          throw new Error('Invalid credentials')
        }
        
        const { user, token, refreshToken } = await response.json()
        
        this.user = user
        this.token = token
        this.refreshToken = refreshToken
        
        // 保存到本地存储
        if (token) localStorage.setItem('token', token)
        if (refreshToken) localStorage.setItem('refreshToken', refreshToken)
      } catch (error) {
        this.error = (error as Error).message
        throw error
      } finally {
        this.loading = false
      }
    },
    
    async logout() {
      this.user = null
      this.token = null
      this.refreshToken = null
      
      localStorage.removeItem('token')
      localStorage.removeItem('refreshToken')
    },
    
    async refreshToken() {
      if (!this.refreshToken) {
        throw new Error('No refresh token available')
      }
      
      try {
        const response = await fetch('/api/auth/refresh', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ refreshToken: this.refreshToken })
        })
        
        if (!response.ok) {
          throw new Error('Failed to refresh token')
        }
        
        const { token, refreshToken: newRefreshToken } = await response.json()
        
        this.token = token
        this.refreshToken = newRefreshToken
        
        localStorage.setItem('token', token)
        localStorage.setItem('refreshToken', newRefreshToken)
      } catch (error) {
        this.logout() // Refresh failed, log out user
        throw error
      }
    }
  }
})

// stores/modules/products/catalog.ts
import { defineStore } from 'pinia'

export const useCatalogStore = defineStore('catalog', {
  state: () => ({
    products: [] as Product[],
    categories: [] as Category[],
    brands: [] as Brand[],
    filters: {
      category: [] as string[],
      brand: [] as string[],
      minPrice: 0,
      maxPrice: Infinity,
      inStock: false
    },
    loading: false,
    error: null as string | null
  }),
  
  getters: {
    filteredProducts: (state) => {
      return state.products.filter(product => {
        // 类别过滤
        if (state.filters.category.length > 0 && 
            !state.filters.category.includes(product.categoryId)) {
          return false
        }
        
        // 品牌过滤
        if (state.filters.brand.length > 0 && 
            !state.filters.brand.includes(product.brandId)) {
          return false
        }
        
        // 价格过滤
        if (product.price < state.filters.minPrice || 
            product.price > state.filters.maxPrice) {
          return false
        }
        
        // 库存过滤
        if (state.filters.inStock && !product.inStock) {
          return false
        }
        
        return true
      })
    },
    
    categoryMap: (state) => new Map(state.categories.map(cat => [cat.id, cat])),
    brandMap: (state) => new Map(state.brands.map(brand => [brand.id, brand]))
  },
  
  actions: {
    async loadCatalog() {
      this.loading = true
      try {
        const [productsRes, categoriesRes, brandsRes] = await Promise.all([
          fetch('/api/products'),
          fetch('/api/categories'),
          fetch('/api/brands')
        ])
        
        const [products, categories, brands] = await Promise.all([
          productsRes.json(),
          categoriesRes.json(),
          brandsRes.json()
        ])
        
        this.products = products
        this.categories = categories
        this.brands = brands
      } catch (error) {
        this.error = (error as Error).message
      } finally {
        this.loading = false
      }
    },
    
    setCategoryFilter(categories: string[]) {
      this.filters.category = categories
    },
    
    setBrandFilter(brands: string[]) {
      this.filters.brand = brands
    },
    
    setPriceFilter(min: number, max: number) {
      this.filters.minPrice = min
      this.filters.maxPrice = max
    },
    
    setInStockFilter(inStock: boolean) {
      this.filters.inStock = inStock
    },
    
    clearFilters() {
      this.filters = {
        category: [],
        brand: [],
        minPrice: 0,
        maxPrice: Infinity,
        inStock: false
      }
    }
  }
})

interface Brand {
  id: string
  name: string
  logo: string
}

// stores/modules/products/inventory.ts
export const useInventoryStore = defineStore('inventory', {
  state: () => ({
    stockLevels: new Map<string, StockLevel>(),
    lowStockThreshold: 10,
    loading: false,
    error: null as string | null
  }),
  
  getters: {
    lowStockItems: (state) => {
      return Array.from(state.stockLevels.entries())
        .filter(([_, stock]) => stock.quantity <= state.lowStockThreshold)
        .map(([productId, stock]) => ({ productId, ...stock }))
    },
    
    outOfStockItems: (state) => {
      return Array.from(state.stockLevels.entries())
        .filter(([_, stock]) => stock.quantity === 0)
        .map(([productId, stock]) => ({ productId, ...stock }))
    }
  },
  
  actions: {
    async loadStockLevels() {
      this.loading = true
      try {
        const response = await fetch('/api/inventory')
        const stockData = await response.json()
        
        this.stockLevels = new Map(stockData.map((item: any) => [item.productId, item]))
      } catch (error) {
        this.error = (error as Error).message
      } finally {
        this.loading = false
      }
    },
    
    async updateStock(productId: string, quantity: number) {
      try {
        const response = await fetch(`/api/inventory/${productId}`, {
          method: 'PATCH',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ quantity })
        })
        
        if (!response.ok) throw new Error('Failed to update stock')
        
        const updatedStock = await response.json()
        this.stockLevels.set(productId, updatedStock)
      } catch (error) {
        this.error = (error as Error).message
        throw error
      }
    },
    
    async adjustStock(productId: string, adjustment: number) {
      const currentStock = this.stockLevels.get(productId)
      if (!currentStock) {
        throw new Error('Product not found in inventory')
      }
      
      const newQuantity = Math.max(0, currentStock.quantity + adjustment)
      await this.updateStock(productId, newQuantity)
    }
  }
})

interface StockLevel {
  productId: string
  quantity: number
  reserved: number
  lastUpdated: string
}

// stores/core/baseStore.ts
import { defineStore, StoreDefinition } from 'pinia'

export abstract class BaseStore<T> {
  protected state!: T
  
  constructor(protected readonly storeId: string) {}
  
  // 子类需要实现的抽象方法
  abstract getState(): T
  abstract initialize(): void
  
  // 公共方法
  protected async handleAsyncOperation<T>(
    operation: () => Promise<T>, 
    setError: (error: string) => void
  ): Promise<T | null> {
    try {
      return await operation()
    } catch (error) {
      setError((error as Error).message)
      return null
    }
  }
}

// stores/core/apiService.ts
export class ApiService {
  private baseUrl: string
  
  constructor(baseUrl: string) {
    this.baseUrl = baseUrl
  }
  
  async get<T>(endpoint: string): Promise<T> {
    const response = await fetch(`${this.baseUrl}${endpoint}`)
    if (!response.ok) {
      throw new Error(`GET ${endpoint} failed: ${response.statusText}`)
    }
    return response.json()
  }
  
  async post<T>(endpoint: string, data: any): Promise<T> {
    const response = await fetch(`${this.baseUrl}${endpoint}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    })
    if (!response.ok) {
      throw new Error(`POST ${endpoint} failed: ${response.statusText}`)
    }
    return response.json()
  }
  
  async put<T>(endpoint: string, data: any): Promise<T> {
    const response = await fetch(`${this.baseUrl}${endpoint}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    })
    if (!response.ok) {
      throw new Error(`PUT ${endpoint} failed: ${response.statusText}`)
    }
    return response.json()
  }
  
  async delete(endpoint: string): Promise<void> {
    const response = await fetch(`${this.baseUrl}${endpoint}`, {
      method: 'DELETE'
    })
    if (!response.ok) {
      throw new Error(`DELETE ${endpoint} failed: ${response.statusText}`)
    }
  }
}

// stores/features/analytics.ts
import { defineStore } from 'pinia'
import { ApiService } from '../core/apiService'

export const useAnalyticsStore = defineStore('analytics', {
  state: () => ({
    events: [] as AnalyticsEvent[],
    userBehavior: {} as Record<string, UserBehavior>,
    loading: false,
    error: null as string | null,
    apiService: new ApiService('/api/analytics')
  }),
  
  getters: {
    userEngagementScore: (state) => (userId: string) => {
      const behavior = state.userBehavior[userId]
      if (!behavior) return 0
      
      // 计算参与度分数
      return (
        behavior.pageViews * 0.1 +
        behavior.clicks * 0.5 +
        behavior.sessions * 2 +
        (behavior.avgSessionDuration / 60) * 0.1
      )
    },
    
    topPerformingPages: (state) => {
      const pageViews = new Map<string, number>()
      state.events
        .filter(e => e.type === 'page_view')
        .forEach(e => {
          const current = pageViews.get(e.properties?.url) || 0
          pageViews.set(e.properties?.url, current + 1)
        })
      
      return Array.from(pageViews.entries())
        .sort((a, b) => b[1] - a[1])
        .slice(0, 10)
    }
  },
  
  actions: {
    async trackEvent(event: Omit<AnalyticsEvent, 'timestamp'>) {
      const fullEvent: AnalyticsEvent = {
        ...event,
        timestamp: new Date().toISOString()
      }
      
      try {
        // 添加到本地
        this.events.push(fullEvent)
        
        // 发送到服务器（异步，不影响用户体验）
        this.apiService.post('/events', fullEvent).catch(error => {
          console.error('Failed to send analytics event:', error)
          // 可以实现本地队列重试机制
        })
      } catch (error) {
        this.error = (error as Error).message
      }
    },
    
    async loadUserBehavior(userId: string) {
      this.loading = true
      try {
        const behavior = await this.apiService.get<UserBehavior>(`/users/${userId}/behavior`)
        this.userBehavior[userId] = behavior
      } catch (error) {
        this.error = (error as Error).message
      } finally {
        this.loading = false
      }
    },
    
    async getConversionFunnel(stepNames: string[]) {
      this.loading = true
      try {
        const funnelData = await this.apiService.post('/funnel', { steps: stepNames })
        return funnelData
      } catch (error) {
        this.error = (error as Error).message
        throw error
      } finally {
        this.loading = false
      }
    },
    
    async exportAnalytics(startDate: string, endDate: string) {
      try {
        const response = await fetch(
          `/api/analytics/export?start=${startDate}&end=${endDate}`,
          {
            method: 'GET',
            headers: {
              'Authorization': `Bearer ${this.getToken()}`
            }
          }
        )
        
        if (!response.ok) throw new Error('Export failed')
        
        const blob = await response.blob()
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = `analytics_${startDate}_to_${endDate}.csv`
        a.click()
        window.URL.revokeObjectURL(url)
      } catch (error) {
        this.error = (error as Error).message
      }
    },
    
    // 辅助方法
    getToken(): string {
      // 这里应该从认证Store获取token
      // 为示例简单返回空字符串
      return ''
    }
  }
})

interface AnalyticsEvent {
  id: string
  type: string
  userId: string
  sessionId: string
  timestamp: string
  properties?: Record<string, any>
}

interface UserBehavior {
  userId: string
  pageViews: number
  clicks: number
  sessions: number
  avgSessionDuration: number // in seconds
  lastActive: string
  preferredPages: string[]
}