Vue3+TypeScript：可复用电商购物车组件实战

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

引言

Vue3的组合式API（Composition API）结合TypeScript为组件开发带来了更强大的类型支持和代码组织能力。本文将通过构建一个电商购物车组件，展示如何利用组合式API实现可复用、类型安全的业务逻辑。

1. 组件需求分析

购物车组件需要具备以下核心功能：

• 商品列表展示
• 数量调整（增加/减少）
• 商品移除
• 总价计算
• 空购物车状态处理

2. 定义商品类型接口

首先定义商品的数据结构，确保类型安全：

interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
  image?: string;
}

3. 创建组合式函数

将购物车逻辑封装为可复用的组合式函数：

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

export function useCart() {
  const items = ref([]);

  const totalPrice = computed(() => {
    return items.value.reduce((total, item) => total + item.price * item.quantity, 0);
  });

  const addItem = (item: Omit) => {
    const existingItem = items.value.find(i => i.id === item.id);
    if (existingItem) {
      existingItem.quantity++;
    } else {
      items.value.push({ ...item, quantity: 1 });
    }
  };

  const updateQuantity = (id: string, quantity: number) => {
    const item = items.value.find(i => i.id === id);
    if (item) {
      item.quantity = Math.max(1, quantity);
    }
  };

  const removeItem = (id: string) => {
    items.value = items.value.filter(item => item.id !== id);
  };

  return {
    items,
    totalPrice,
    addItem,
    updateQuantity,
    removeItem
  };
}

4. 构建购物车组件

使用组合式函数创建购物车组件：

<template>
  <div class=\"cart\">
    <h2>购物车</h2>
    
    <div v-if=\"items.length === 0\" class=\"empty-cart\">
      购物车是空的
    </div>
    
    <ul v-else>
      <li v-for=\"item in items\" :key=\"item.id\" class=\"cart-item\">
        <img :src=\"item.image\" :alt=\"item.name\" class=\"item-image\">
        <div class=\"item-details\">
          <h3>{{ item.name }}</h3>
          <p>¥{{ item.price.toFixed(2) }}</p>
        </div>
        <div class=\"item-controls\">
          <button @click=\"updateQuantity(item.id, item.quantity - 1)\">-</button>
          <span>{{ item.quantity }}</span>
          <button @click=\"updateQuantity(item.id, item.quantity + 1)\">+</button>
          <button @click=\"removeItem(item.id)\" class=\"remove-btn\">移除</button>
        </div>
      </li>
    </ul>
    
    <div v-if=\"items.length > 0\" class=\"cart-summary\">
      <p>总计: ¥{{ totalPrice.toFixed(2) }}</p>
    </div>
  </div>
</template>

<script lang=\"ts\">
import { defineComponent } from \'vue\';
import { useCart } from \'./useCart\';
import type { CartItem } from \'./types\';

export default defineComponent({
  setup() {
    const { items, totalPrice, updateQuantity, removeItem } = useCart();
    
    return {
      items,
      totalPrice,
      updateQuantity,
      removeItem
    };
  }
});
</script>

5. 类型增强与错误处理

添加类型检查和错误处理：

• 为所有函数参数添加类型注解
• 使用可选链和空值合并运算符处理可能为null的值
• 添加数量边界检查（如最小值为1）

6. 组件复用与扩展

该组件的可复用性体现在：

• 组合式函数可在多个组件间共享
• 通过props自定义UI样式和交互逻辑
• 支持本地存储持久化（只需在useCart中添加localStorage逻辑）

总结

通过组合式API和TypeScript，我们构建了一个类型安全、逻辑清晰、易于复用的购物车组件。这种开发方式不仅提高了代码的可维护性，还通过类型系统减少了运行时错误。在实际项目中，可以进一步扩展功能，如添加优惠券、运费计算等，而核心逻辑保持不变。