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

最新推荐文章于 2025-03-11 19:07:39 发布

JJCTO袁龙

最新推荐文章于 2025-03-11 19:07:39 发布

阅读量1.2k

点赞数 11

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yuanlong12178/article/details/139746871

版权

Vue 专栏收录该内容

718 篇文章

订阅专栏

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

功能介绍

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

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

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

项目结构

项目结构如下：

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

代码实现

创建 Vue 项目

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

npm install -g @vue/cli

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

vue create vue-shopping-cart
cd vue-shopping-cart

安装必要的依赖

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

npm install vuex@next

设置 Vuex Store

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

// store.js
import { 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 实例中：

// src/main.js
import { 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 组件：

<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 组件：

<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 中使用我们刚刚创建的两个组件：

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