在現(xiàn)代Web開(kāi)發(fā)中，Vue.js作為一個(gè)漸進(jìn)式JavaScript框架，憑借其靈活性和易用性，被廣泛應(yīng)用于構(gòu)建用戶(hù)界面和單頁(yè)應(yīng)用。最近，Vue 3.0版本的發(fā)布，更是引入了一系列新特性和優(yōu)化，使開(kāi)發(fā)變得更加簡(jiǎn)便和強(qiáng)大。今天，我們將通過(guò)一個(gè)簡(jiǎn)單的購(gòu)物車(chē)功能來(lái)展示如何在Vue 3中實(shí)現(xiàn)添加和移除商品的功能。

## 功能介紹

我們要實(shí)現(xiàn)的購(gòu)物車(chē)功能包括以下幾個(gè)部分：

1. **商品列表展示**：顯示可購(gòu)買(mǎi)的商品。
2. **添加商品到購(gòu)物車(chē)**：用戶(hù)點(diǎn)擊按鈕后，將商品添加到購(gòu)物車(chē)。
3. **移除商品**：用戶(hù)可以將購(gòu)物車(chē)中的商品移除。

為了實(shí)現(xiàn)這個(gè)功能，我們需要兩個(gè)主要組件：`ProductList` 和 `ShoppingCart`。

## 項(xiàng)目結(jié)構(gòu)

項(xiàng)目結(jié)構(gòu)如下：

## 代碼實(shí)現(xiàn)

### 創(chuàng)建 Vue 項(xiàng)目

首先，確保你已經(jīng)安裝 Vue CLI。如果沒(méi)有，可以通過(guò)以下命令進(jìn)行安裝：

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

接著，創(chuàng)建一個(gè)新的Vue 3項(xiàng)目：

### 安裝必要的依賴(lài)

在項(xiàng)目目錄下，安裝 Vuex，用于狀態(tài)管理：

```bashnpm install vuex@next```

### 設(shè)置 Vuex Store

在 `src` 目錄下創(chuàng)建一個(gè)名為 `store.js` 的文件，用于存放 Vuex 相關(guān)代碼：

### 配置入口文件

在 `src/main.js` 中導(dǎo)入 Vuex Store，并將其配置到 Vue 實(shí)例中：

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

### 創(chuàng)建ProductList組件

在 `src/components/ProductList.vue` 中創(chuàng)建 `ProductList` 組件：

### 創(chuàng)建ShoppingCart組件

在 `src/components/ShoppingCart.vue` 中創(chuàng)建 `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` 中使用我們剛剛創(chuàng)建的兩個(gè)組件：

## 運(yùn)行項(xiàng)目

在終端中運(yùn)行以下命令以啟動(dòng)開(kāi)發(fā)服務(wù)器：

```bashnpm run serve```

訪問(wèn) [http://localhost:8080](http://localhost:8080)，你應(yīng)該可以看到一個(gè)簡(jiǎn)單的產(chǎn)品列表和購(gòu)物車(chē)。當(dāng)你點(diǎn)擊“Add to Cart”按鈕時(shí)，商品將會(huì)被添加到購(gòu)物車(chē)；同時(shí)，你可以通過(guò)點(diǎn)擊“Remove”按鈕將商品從購(gòu)物車(chē)中移除。

至此，我們成功地實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的購(gòu)物車(chē)功能。通過(guò)這一示例，我們了解了如何在Vue 3中使用 Vuex 進(jìn)行狀態(tài)管理，并通過(guò)組件之間的數(shù)據(jù)傳遞與事件處理，構(gòu)建了一個(gè)功能完整的購(gòu)物車(chē)系統(tǒng)。

---

最后問(wèn)候親愛(ài)的朋友們，并邀請(qǐng)你們閱讀我的全新著作