Vue3组合API实战：电商购物车组件库

Vue3组合式API实战：构建可复用的电商购物车组件库

随着Vue3组合式API的普及，前端组件开发迎来了新的范式转变。本文将深入探讨如何利用组合式API构建可复用的电商购物车组件库，通过函数式编程思想提升代码的可维护性和扩展性。

1. 组件设计架构

购物车组件库的设计应遵循单一职责原则，将核心功能拆分为多个可复用的组合函数。主要模块包括：

• 状态管理：使用reactive定义购物车数据结构，包含商品列表、总价、数量等核心字段
• 业务逻辑：封装添加商品、删除商品、修改数量、计算总价等操作方法
• UI交互：提供商品列表、数量选择器、价格显示等可视化组件

2. 核心组合函数实现

以下是关键组合函数的实现方案：

2.1 useCartState

该函数负责购物车状态管理，采用响应式数据存储：

const useCartState = () => {
  const items = ref([])
  const totalPrice = computed(() => items.value.reduce((sum, item) => sum + item.price * item.quantity, 0))
  
  const addItem = (product) => {
    const existingItem = items.value.find(item => item.id === product.id)
    if (existingItem) {
      existingItem.quantity += 1
    } else {
      items.value.push({ ...product, quantity: 1 })
    }
  }
  
  return { items, totalPrice, addItem }
}

const useCartActions = (items) => {
  const updateQuantity = (id, quantity) => {
    const item = items.value.find(item => item.id === id)
    if (item) item.quantity = Math.max(1, quantity)
  }
  
  const removeItem = (id) => {
    const index = items.value.findIndex(item => item.id === id)
    if (index > -1) items.value.splice(index, 1)
  }
  
  return { updateQuantity, removeItem }
}