如何在Vue3中实现实现一个简单的购物车功能，可以添加和移除商品

在现代Web开发中，Vue.js作为一个渐进式JavaScript框架，凭借其灵活性和易用性，被广泛应用于构建用户界面和单页应用。最近，Vue 3.0版本的发布，更是引入了一系列新特性和优化，使开发变得更加简便和强大。今天，我们将通过一个简单的购物车功能来展示如何在Vue 3中实现添加和移除商品的功能。

## 功能介绍

我们要实现的购物车功能包括以下几个部分：

1. **商品列表展示**：显示可购买的商品。
2. **添加商品到购物车**：用户点击按钮后，将商品添加到购物车。
3. **移除商品**：用户可以将购物车中的商品移除。

为了实现这个功能，我们需要两个主要组件：`ProductList` 和 `ShoppingCart`。

## 项目结构

项目结构如下：

```src│├── components│ ├── ProductList.vue│ ├── ShoppingCart.vue│├── App.vue├── main.js```


## 代码实现

### 创建 Vue 项目

首先，确保你已经安装 Vue CLI。如果没有，可以通过以下命令进行安装：

```bashnpm install -g @vue/cli```

接着，创建一个新的Vue 3项目：

```bashvue create vue-shopping-cartcd vue-shopping-cart```

### 安装必要的依赖

在项目目录下，安装 Vuex，用于状态管理：

```bashnpm install vuex@next```

### 设置 Vuex Store

在 `src` 目录下创建一个名为 `store.js` 的文件，用于存放 Vuex 相关代码：

```javascript// store.jsimport { createStore } from 'vuex';
const store = createStore({ state: { products: [ { id: 1, name: 'Product A', price: 100 }, { id: 2, name: 'Product B', price: 200 }, ], cart: [], }, mutations: { ADD_TO_CART(state, product) { const item = state.cart.find(i => i.id === product.id); if (item) { item.quantity++; } else { state.cart.push({ ...product, quantity: 1 }); } }, REMOVE_FROM_CART(state, product) { const itemIndex = state.cart.findIndex(i => i.id === product.id); if (itemIndex > -1) { state.cart.splice(itemIndex, 1); } }, }, getters: { cartTotal(state) { return state.cart.reduce((total, item) => total + item.price * item.quantity, 0); }, },});
export default store;```

### 配置入口文件

在 `src/main.js` 中导入 Vuex Store，并将其配置到 Vue 实例中：

```javascript// src/main.jsimport { createApp } from 'vue';import App from './App.vue';import store from './store.js';
createApp(App).use(store).mount('#app');```

### 创建ProductList组件

在 `src/components/ProductList.vue` 中创建 `ProductList` 组件：

```vue<template> <div class='product-list'> <h2>Product List</h2> <ul> <li v-for='product in products' :key='product.id'> {{ product.name }} - ${{ product.price }} <button @click='addToCart(product)'>Add to Cart</button> </li> </ul> </div></template>
<script>import { mapState, mapMutations } from 'vuex';
export default { computed: { ...mapState(['products']), }, methods: { ...mapMutations(['ADD_TO_CART']), addToCart(product) { this.ADD_TO_CART(product); }, },};</script>
<style scoped>.product-list { margin-bottom: 20px;}
button { margin-left: 10px;}</style>```

### 创建ShoppingCart组件

在 `src/components/ShoppingCart.vue` 中创建 `ShoppingCart` 组件：

```vue<template>  <div class='shopping-cart'>    <h2>Shopping Cart</h2>    <ul>      <li v-for='item in cart' :key='item.id'>        {{ item.name }} - ${{ item.price }} x {{ item.quantity }}        <button @click='removeFromCart(item)'>Remove</button>      </li>    </ul>    <div class='cart-total'>      Total: ${{ cartTotal }}    </div>  </div></template>
<script>import { mapState, mapGetters, mapMutations } from 'vuex';
export default {  computed: {    ...mapState(['cart']),    ...mapGetters(['cartTotal']),  },  methods: {    ...mapMutations(['REMOVE_FROM_CART']),    removeFromCart(product) {      this.REMOVE_FROM_CART(product);    },  },};</script>
<style scoped>.shopping-cart {  border-top: 1px solid #ccc;  padding-top: 20px;}
button {  margin-left: 10px;}
.cart-total {  margin-top: 20px;  font-weight: bold;}</style>```

### 配置主组件

在 `src/App.vue` 中使用我们刚刚创建的两个组件：

```vue<template> <div id='app'> <ProductList /> <ShoppingCart /> </div></template>
<script>import ProductList from './components/ProductList.vue';import ShoppingCart from './components/ShoppingCart.vue';
export default { components: { ProductList, ShoppingCart, },};</script>
<style>#app { font-family: Avenir, Helvetica, Arial, sans-serif; text-align: center; color: #2c3e50;}</style>```

## 运行项目

在终端中运行以下命令以启动开发服务器：

```bashnpm run serve```

访问 [http://localhost:8080](http://localhost:8080)，你应该可以看到一个简单的产品列表和购物车。当你点击“Add to Cart”按钮时，商品将会被添加到购物车；同时，你可以通过点击“Remove”按钮将商品从购物车中移除。

至此，我们成功地实现了一个简单的购物车功能。通过这一示例，我们了解了如何在Vue 3中使用 Vuex 进行状态管理，并通过组件之间的数据传递与事件处理，构建了一个功能完整的购物车系统。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作