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

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

展開全文

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

## 功能介紹

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

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

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

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

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

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

## 代碼實(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)目：

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

### 安裝必要的依賴

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

```bashnpm install vuex@next```

### 設(shè)置 Vuex Store

在 `src` 目錄下創(chuàng)建一個(gè)名為 `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 實(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` 組件：

```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)建的兩個(gè)組件：

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

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

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

```bashnpm run serve```

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

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

---

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

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自： F2967527 > 《js》

舉報(bào)/認(rèn)領(lǐng)