Vue3 Composition API电商购物车组件实战

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

Vue3 的 Composition API 提供了更灵活的代码组织方式，特别适合构建复杂可复用的组件。本文将通过实战演示如何使用 Composition API 开发一个电商购物车组件，展示其模块化和可复用的优势。

1. 组件设计思路

购物车组件需要管理商品数据、计算总价、数量增减等核心功能。采用 Composition API 可以将相关逻辑抽取为可复用的组合式函数，实现关注点分离。主要功能包括：

• 商品列表展示
• 数量增减控制
• 价格计算
• 库存验证
• 移除商品功能

2. 创建组合式函数

首先创建 useCart 组合式函数，集中管理购物车逻辑：

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

3. 构建购物车组件

在 ShoppingCart 组件中使用组合式函数：

<template>
  <div class=\"cart\">
    <h2>购物车</h2>
    <div v-if=\"items.length\">
      <div v-for=\"item in items\" :key=\"item.id\" class=\"cart-item\">
        <span>{{ item.name }}</span>
        <button @click=\"updateQuantity(item.id, item.quantity - 1)\">-</button>
        <span>{{ item.quantity }}</span>
        <button @click=\"updateQuantity(item.id, item.quantity + 1)\">+</button>
        <span>¥{{ (item.price * item.quantity).toFixed(2) }}</span>
        <button @click=\"removeItem(item.id)\">删除</button>
      </div>
      <div class=\"total\">
        总计: ¥{{ totalPrice.toFixed(2) }}
      </div>
    </div>
    <p v-else>购物车为空</p>
  </div>
</template>

<script setup>
import { useCart } from \'./useCart\'

const props = defineProps({
  initialItems: Array
})

const { items, updateQuantity, removeItem, totalPrice } = useCart(props.initialItems)
</script>

4. 增强组件功能

通过组合式函数的灵活性，可以轻松添加更多功能：

• 库存检查：在 updateQuantity 函数中添加库存验证逻辑
• 本地存储：使用 watchEffect 持久化购物车数据
• 事件通知：通过 defineEmits 触发购物车变化事件
• 动画效果：结合 Vue3 的 Transition 组件添加过渡动画

5. 复用与扩展

由于逻辑已抽离到组合式函数，这个购物车组件可以在多个场景中复用：

• 直接用于购物车页面
• 作为商品详情页的迷你购物车
• 通过 props 自定义样式和事件处理
• 与其他组合式函数（如 useLocalStorage）结合使用

总结

通过 Composition API 开发购物车组件，实现了逻辑与视图的清晰分离。组合式函数的封装让代码更具可维护性和可复用性，开发者可以根据业务需求灵活扩展功能。这种方式不仅提升了开发效率，也为大型应用中的组件协作提供了良好的实践模式。在实际项目中，可以进一步优化性能，比如使用 shallowRef 处理大型商品列表，或添加防抖处理频繁的数量变化操作。