如何在Vue3中實現(xiàn)實現(xiàn)一個簡單的購物車功能，可以添加和移除商品

F2967527 2024-08-13 發(fā)布于北京

展開全文

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

## 功能介紹

我們要實現(xiàn)的購物車功能包括以下幾個部分：

1. **商品列表展示**：顯示可購買的商品。
2. **添加商品到購物車**：用戶點擊按鈕后，將商品添加到購物車。
3. **移除商品**：用戶可以將購物車中的商品移除。

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

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

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

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

## 代碼實現(xiàn)

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

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

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

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

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

### 安裝必要的依賴

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

```bashnpm install vuex@next```

### 設(shè)置 Vuex Store

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

```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` 中導(dǎo)入 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');```

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

在 `src/components/ProductList.vue` 中創(chuàng)建 `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>```

### 創(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)建的兩個組件：

```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>```

## 運行項目

在終端中運行以下命令以啟動開發(fā)服務(wù)器：

```bashnpm run serve```

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

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

---

最后問候親愛的朋友們，并邀請你們閱讀我的全新著作