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

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

项目结构

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

1. 商品列表
2. 购物车
3. 本地存储的管理

初始化项目

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

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 } 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方法来计算购物车中商品的总价。通过对每个商品的价格和数量进行相乘并求和，我们可以实时更新总价。

总结

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

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作