使用 Vue 3 制作购物车功能，结合本地存储

简介

在现代 Web 开发中，购物车是电商网站中至关重要的功能之一。Vue 3 作为一个流行的前端框架，提供了许多功能强大的特性，使得开发购物车变得简单而高效。在这篇文章中，我们将使用 Vue 3 的 setup 语法糖，结合本地存储，来创建一个基础的购物车功能。

项目结构

首先，让我们搭建项目的基础结构。我们将创建一个名为 ShoppingCart.vue 的组件，包含以下几个部分：

商品列表
购物车
本地存储的管理

初始化项目

如果你还没有 Vue 3 项目，可以通过 Vue CLI 或 Vite 初始化一个新的项目。这里我们将使用 Vite 来创建一个新的 Vue 3 项目：

npm init vite@latest my-shopping-cart
cd my-shopping-cart
npm install

然后，在 src 目录下创建 components 文件夹，并在其中创建一个名为 ShoppingCart.vue 的文件。

ShoppingCart.vue 代码

下面是我们 ShoppingCart.vue 组件的基础代码。我们将实现商品的添加和删除功能，并且保证数据的持久性通过本地存储。

<template>
  <div>
    <h1>购物车</h1>
    <div>
      <h2>商品列表</h2>
      <ul>
        <li v-for="item in products" :key="item.id">
          <span>{{ item.name }} - {{ item.price }} 元</span>
          <button @click="addToCart(item)">添加到购物车</button>
        </li>
      </ul>
    </div>
    
    <div>
      <h2>我的购物车</h2>
      <ul>
        <li v-for="item in cart" :key="item.id">
          <span>{{ item.name }} - {{ item.price }} 元</span>
          <button @click="removeFromCart(item.id)">移除</button>
        </li>
      </ul>
      <p v-if="cart.length === 0">购物车是空的</p>
      <p v-if="cart.length > 0">总价: {{ totalPrice }} 元</p>
    </div>
  </div>
</template>

<script>
import { ref, watch, computed } from 'vue';

export default {
  name: 'ShoppingCart',
  setup() {
    // 商品列表
    const products = ref([
      { id: 1, name: '商品 A', price: 100 },
      { id: 2, name: '商品 B', price: 200 },
      { id: 3, name: '商品 C', price: 300 },
    ]);

    // 购物车数组
    const cart = ref([]);

    // 从本地存储加载购物车
    const loadCart = () => {
      const storedCart = JSON.parse(localStorage.getItem('shoppingCart'));
      if (storedCart) {
        cart.value = storedCart;
      }
    };

    // 添加商品到购物车
    const addToCart = (item) => {
      const existingItem = cart.value.find(cartItem => cartItem.id === item.id);
      if (existingItem) {
        existingItem.quantity++;
      } else {
        cart.value.push({ ...item, quantity: 1 });
      }
      saveCart();
    };

    // 从购物车中移除商品
    const removeFromCart = (id) => {
      cart.value = cart.value.filter(item => item.id !== id);
      saveCart();
    };

    // 计算总价
    const totalPrice = computed(() => {
      return cart.value.reduce((total, item) => total + item.price * item.quantity, 0);
    });

    // 将购物车数据保存到本地存储
    const saveCart = () => {
      localStorage.setItem('shoppingCart', JSON.stringify(cart.value));
    };

    // 监听购物车的变化并保存到本地存储
    watch(cart, saveCart);

    // 组件第一个渲染时加载购物车数据
    loadCart();

    return {
      products,
      cart,
      addToCart,
      removeFromCart,
      totalPrice,
    };
  },
};
</script>

<style scoped>
button {
  margin-left: 10px;
}
</style>

代码解析

1. 商品列表

我们在 setup 函数中定义了一个 products 数组，包含了多个商品的信息。使用 v-for 指令，我们在模板中循环输出每个商品，并提供一个“添加到购物车”的按钮。

2. 购物车功能

购物车用 cart 数组来存储已添加的商品。我们定义了 addToCart 和 removeFromCart 函数，分别用于添加商品到购物车和从购物车中移除商品。

当我们添加一个商品时，我们首先检查购物车中是否已存在该商品。如果存在，则只增加其数量；如果不存在，则将其作为新项添加到购物车中。

3. 本地存储

为了实现购物车数据的持久化，我们使用 localStorage。在组件加载时，我们调用 loadCart 函数来从本地存储中加载购物车数据。每当购物车发生变化时，我们都会调用 saveCart 函数，将当前的购物车保存到本地存储中。

4. 计算总价

我们使用了 computed 方法来计算购物车中商品的总价。通过对每个商品的价格和数量进行相乘并求和，我们可以实时更新总价。

总结

上述代码展示了如何使用 Vue 3 和本地存储制作一个基础的购物车功能。我们利用了 Vue 的响应式特性，使得界面能够实时更新。通过本地存储，我们能够保证用户的购物车数据不会在页面刷新或关闭后丢失。这为开发功能全面的电商应用打下了基础。

复制全文生成海报 Web开发前端电商 Vue 编程

编程 Vue3创建一个基础的购物车功能，结合本地存储实现数据的持久性