使用 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 的响应式特性，使得界面能够实时更新。通过本地存储，我们能够保证用户的购物车数据不会在页面刷新或关闭后丢失。这为开发功能全面的电商应用打下了基础。