Vue 实战-电商商品列表的组件化设计与状态管理

Vue 极速入门 第 19 节：电商商品列表的组件化设计与状态管理

引言

在现代电商应用中，商品列表是一个核心功能。如何高效地设计组件并管理状态，是提升开发效率和用户体验的关键。本文将带你使用 Vue 3 实现一个电商商品列表，涵盖组件化设计（商品卡片、分页器、筛选器）和状态管理（Pinia 或 Vuex），帮助你掌握复杂应用开发的精髓。

---

1. 项目概述

1.1 组件化设计

组件化设计是将 UI 拆分为独立、可复用的部分。在电商商品列表中，我们可以将以下部分组件化：

• 商品卡片：展示商品图片、名称、价格等信息。
• 分页器：实现商品列表的分页功能。
• 筛选器：允许用户根据价格、类别等条件筛选商品。

1.2 状态管理

状态管理用于集中管理应用中的数据流。我们将使用 Pinia（Vue 3 推荐的状态管理库）来管理商品数据和购物车状态。

---

2. 项目初始化

2.1 创建 Vue 3 项目

使用 Vue CLI 创建一个新项目，更详细的教程，请移步 Vue 环境搭建到第一个应用：

vue create ecommerce-app

选择 Vue 3 模板，并安装 Pinia：

npm install pinia

2.2 项目目录结构

以下是项目的核心目录结构：

ecommerce-app/
├── public/                  # 静态资源
├── src/                     # 源代码
│   ├── assets/              # 静态资源（图片、样式等）
│   ├── components/          # 组件
│   │   ├── ProductCard.vue  # 商品卡片组件
│   │   ├── Pagination.vue   # 分页器组件
│   │   └── Filter.vue       # 筛选器组件
│   ├── stores/              # 状态管理
│   │   └── productStore.js  # 商品状态管理
│   ├── views/               # 页面
│   │   └── ProductList.vue  # 商品列表页面
│   ├── App.vue              # 根组件
│   └── main.js              # 入口文件
├── package.json             # 项目依赖
└── README.md                # 项目说明

---

3. 组件化设计

3.1 商品卡片组件 (ProductCard.vue)

商品卡片组件用于展示单个商品的信息。

<template>
  <div class="product-card">
    <!-- 商品图片 -->
    <img :src="product.image" :alt="product.name" class="product-image" />
    <!-- 商品名称 -->
    <h3 class="product-name">{
   {
    product.name }}</h3>
    <!-- 商品价格 -->
    <p class="product-price">{
   {
    formatPrice(product.price) }}</p>
    <!-- 添加到购物车按钮 -->
    <button class="add-to-cart-btn" @click="addToCart">Add to Cart</button>
  </div>
</template>

<script>
export default {
   
  props: {
   
    product: {
   
      type: Object,
      required: true,
    },
  },
  methods: {
   
    // 格式化价格
    formatPrice(price) {
   
      return `$${
     price.toFixed(2)}`;
    },
    // 触发添加购物车事件
    addToCart() {
   
      this.$emit('add-to-cart', this.product);
    },
  },
};
</script>

<style scoped>
.product-card {
   
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.product-card:hover {
   
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-image {
   
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.product-name {
   
  font-size: 18px;
  margin: 12px 0;
  color: #333;
}

.product-price {
   
  font-size: 16px;
  font-weight: bold;
  color: #e91e63;
  margin: 8px 0;
}

.add-to-cart-btn {
   
  background-color: #42b983;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;