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

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

Vue3的组合式API（Composition API）为组件开发提供了更灵活、更强大的组织代码方式。本文将通过实战演示如何使用组合式API构建一个可复用的电商购物车组件，帮助开发者掌握这一核心特性。

1. 项目初始化与组件设计

首先创建一个新的Vue3项目，并规划购物车组件的基本结构。一个完整的购物车组件需要包含以下核心功能：

• 商品列表展示
• 商品数量调整
• 商品删除功能
• 总价计算
• 清空购物车

2. 使用组合式API重构组件逻辑

在传统选项式API中，相关功能可能分散在data、methods、computed等不同选项中。而组合式API可以将相关逻辑组织在一起，提高代码可维护性。

创建useCart.js组合式函数：

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

export function useCart() {
  const items = ref([])
  
  const addItem = (product) => {
    const existingItem = items.value.find(item => item.id === product.id)
    if (existingItem) {
      existingItem.quantity++
    } else {
      items.value.push({...product, quantity: 1})
    }
  }
  
  const updateQuantity = (id, quantity) => {
    const item = items.value.find(item => item.id === id)
    if (item) {
      item.quantity = Math.max(1, quantity)
    }
  }
  
  const removeItem = (id) => {
    items.value = items.value.filter(item => item.id !== id)
  }
  
  const clearCart = () => {
    items.value = []
  }
  
  const totalPrice = computed(() => {
    return items.value.reduce((total, item) => {
      return total + item.price * item.quantity
    }, 0)
  })
  
  return {
    items,
    addItem,
    updateQuantity,
    removeItem,
    clearCart,
    totalPrice
  }
}

3. 构建购物车组件UI

使用组合式函数返回的状态和方法构建购物车组件的模板部分：

  

    
购物车
    

      购物车为空
    
    

      

        

          
          

            
{{ item.name }}
            
¥{{ item.price }}
          
          

            -
            {{ item.quantity }}
            +
            删除
          
        
      
      

        
总计: ¥{{ totalPrice.toFixed(2) }}
        清空购物车
      
    
  

4. 完善组件样式与响应式处理

为购物车组件添加CSS样式，确保良好的用户体验。同时，在组件中正确使用组合式函数：

import { useCart } from \'./useCart\'

const { items, updateQuantity, removeItem, clearCart, totalPrice } = useCart()



.shopping-cart {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.item-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 15px;
}

.item-controls {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.item-controls button {
  margin: 0 5px;
}

.cart-summary {
  margin-top: 20px;
  text-align: right;
}

5. 组件复用与扩展

组合式API的最大优势在于逻辑的可复用性。useCart函数可以在多个组件中复用，例如：

• 商品详情页：添加商品到购物车
• 订单确认页：显示购物车内容
• 购物车管理页面：完整功能实现

6. 性能优化与注意事项

在实际应用中，还需要考虑以下优化点：

• 使用v-memo优化列表渲染
• 添加防抖处理频繁的数量更新
• 实现本地存储持久化购物车数据
• 添加加载状态和错误处理

总结

通过组合式API构建购物车组件，我们实现了逻辑与视图的清晰分离，提高了代码的可维护性和复用性。组合式函数的设计模式使得复杂业务逻辑可以轻松在不同组件间共享，同时保持了代码的整洁和可读性。在实际项目中，这种模式可以进一步扩展，构建出更复杂的电商功能模块。