Vue3组合式API：实战响应式购物车

Vue3组合式API实战：构建响应式电商购物车组件

引言

Vue3的组合式API（Composition API）为构建复杂组件提供了更灵活、更可维护的代码组织方式。本文将通过实战案例，展示如何使用组合式API构建一个功能完善的电商购物车组件，重点讲解响应式状态管理、业务逻辑封装以及组件间通信等核心实践。

核心功能设计

购物车组件需要实现以下核心功能：商品列表展示、数量调整、价格计算、商品删除、全选/取消全选等。使用组合式API可以将这些功能按逻辑相关性进行模块化封装，提高代码复用性和可读性。

实现步骤

1. 响应式状态管理

使用ref和reactive定义购物车的核心状态：

• items：存储商品列表，包含id、名称、单价、数量等属性
• selectedItems：记录选中状态，可通过Set高效管理
• totalPrice：计算总价，通过computed自动更新
• isAllSelected：全选状态，根据selectedItems自动计算

2. 业务逻辑封装

将购物车操作封装为独立的函数，保持视图层简洁：

• updateQuantity：修改商品数量，处理边界值（如最小值1）
• toggleItemSelection：切换单个商品选中状态
• toggleAllSelection：实现全选/取消全选逻辑
• removeItem：删除商品，同时更新选中状态
• calculateTotal：计算选中商品总价

3. 组件结构设计

购物车组件采用以下结构：

• 头部：全选控制、商品总数、总价显示
• 主体：商品列表，每项包含商品信息和操作按钮
• 底部：结算按钮、价格明细

4. 性能优化

针对大量商品数据的性能优化：

• 使用shallowRef存储不参与响应式的商品数据
• 通过v-memo指令优化未选中项的渲染
• 将价格计算等复杂操作放在computed中缓存结果

实战代码示例

以下是组合式API的核心实现片段：

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

export function useShoppingCart() {
  const items = ref([])
  const selectedItems = ref(new Set())
  
  const totalPrice = computed(() => {
    return items.value
      .filter(item => selectedItems.value.has(item.id))
      .reduce((sum, item) => sum + item.price * item.quantity, 0)
  })
  
  const isAllSelected = computed(() => {
    return items.value.length > 0 && selectedItems.value.size === items.value.length
  })
  
  function toggleItemSelection(itemId) {
    if (selectedItems.value.has(itemId)) {
      selectedItems.value.delete(itemId)
    } else {
      selectedItems.value.add(itemId)
    }
  }
  
  function updateQuantity(itemId, newQuantity) {
    const item = items.value.find(item => item.id === itemId)
    if (item) {
      item.quantity = Math.max(1, newQuantity)
    }
  }
  
  return {
    items,
    selectedItems,
    totalPrice,
    isAllSelected,
    toggleItemSelection,
    updateQuantity
  }
}

总结

通过组合式API构建购物车组件，实现了逻辑与视图的清晰分离，状态管理更加直观。其模块化特性使代码易于维护和扩展，特别是在处理复杂业务逻辑时优势明显。在实际项目中，还可以结合Pinia进行状态管理，进一步提升大型应用的可维护性。掌握组合式API的核心思想，将帮助开发者构建更高质量的Vue3应用。