Vue3组合API实战：可复用购物车组件库

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

Vue3的组合式API（Composition API）为开发者提供了更灵活的代码组织和逻辑复用方式。本文将展示如何利用组合式API构建一个可复用的购物车组件库，帮助开发者提高开发效率并保持代码的整洁性。

1. 项目初始化与基础结构

首先，使用Vue CLI或Vite创建一个新的Vue3项目。在src/components目录下创建一个名为Cart的文件夹，用于存放购物车相关的组件。我们需要创建以下文件：

• Cart.vue – 主购物车组件
• CartItem.vue – 购物车单项组件
• useCart.js – 购物车逻辑组合函数

2. 实现购物车逻辑组合函数

在useCart.js中，我们将封装购物车的核心逻辑，包括添加商品、删除商品、更新数量等操作：

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

export function useCart() {
  const items = ref([]);
  
  const totalItems = computed(() => {
    return items.value.reduce((sum, item) => sum + item.quantity, 0);
  });
  
  const totalPrice = computed(() => {
    return items.value.reduce((sum, item) => sum + item.price * item.quantity, 0);
  });
  
  const addToCart = (product) => {
    const existingItem = items.value.find(item => item.id === product.id);
    if (existingItem) {
      existingItem.quantity++;
    } else {
      items.value.push({ ...product, quantity: 1 });
    }
  };
  
  const removeFromCart = (productId) => {
    const index = items.value.findIndex(item => item.id === productId);
    if (index > -1) {
      items.value.splice(index, 1);
    }
  };
  
  const updateQuantity = (productId, quantity) => {
    const item = items.value.find(item => item.id === productId);
    if (item) {
      item.quantity = quantity > 0 ? quantity : 1;
    }
  };
  
  return {
    items,
    totalItems,
    totalPrice,
    addToCart,
    removeFromCart,
    updateQuantity
  };
}

3. 构建购物车单项组件

CartItem.vue组件负责展示单个商品的信息和操作按钮：

<template>
  <div 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 class=\"quantity-controls\">
        <button @click=\"decreaseQuantity\">-</button>
        <span>{{ item.quantity }}</span>
        <button @click=\"increaseQuantity\">+</button>
      </div>
    </div>
    <button class=\"remove-btn\" @click=\"removeItem\">删除</button>
  </div>
</template>

<script setup>
import { defineProps } from \'vue\';

const props = defineProps({
  item: {
    type: Object,
    required: true
  }
});

const emit = defineEmits([\'update-quantity\', \'remove-item\']);

const increaseQuantity = () => {
  emit(\'update-quantity\', props.item.id, props.item.quantity + 1);
};

const decreaseQuantity = () => {
  emit(\'update-quantity\', props.item.id, props.item.quantity - 1);
};

const removeItem = () => {
  emit(\'remove-item\', props.item.id);
};
</script>

4. 创建主购物车组件

Cart.vue组件作为购物车的容器，整合所有子组件并处理业务逻辑：

<template>
  <div class=\"cart\">
    <h2>购物车</h2>
    <div v-if=\"items.length === 0\" class=\"empty-cart\">
      购物车是空的
    </div>
    <div v-else>
      <CartItem 
        v-for=\"item in items\" 
        :key=\"item.id\" 
        :item=\"item\"
        @update-quantity=\"updateQuantity\"
        @remove-item=\"removeFromCart\"
      />
      <div class=\"cart-summary\">
        <p>总计: {{ totalItems }} 件商品</p>
        <p>总价: ￥{{ totalPrice.toFixed(2) }}</p>
        <button class=\"checkout-btn\">结算</button>
      </div>
    </div>
  </div>
</template>

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

const { items, totalItems, totalPrice, updateQuantity, removeFromCart } = useCart();
</script>

5. 使用购物车组件

在父组件中，可以轻松使用这个购物车组件：

<template>
  <div>
    <h1>我的商城</h1>
    <Cart />
  </div>
</template>

<script setup>
import Cart from \'./components/Cart/Cart.vue\';
</script>

6. 扩展与优化

为了使购物车组件库更加完善，可以考虑以下扩展：

• 添加本地存储功能，实现购物车数据的持久化
• 实现商品选择功能，支持批量操作
• 添加动画效果，提升用户体验
• 创建购物车钩子，便于在其他组件中复用购物车逻辑

总结

通过Vue3的组合式API，我们成功构建了一个可复用的购物车组件库。这种方式不仅提高了代码的可维护性，还使得逻辑复用变得更加简单。在实际项目中，可以根据需求进一步扩展功能，如添加优惠券、运费计算等。组合式API的强大之处在于它能够将相关逻辑组织在一起，同时保持组件的简洁和可读性，是现代Vue开发的重要实践。