在现代Web开发中,购物车是电商网站中至关重要的功能之一。Vue3作为一个流行的前端框架,提供了许多功能强大的特性,使得开发购物车变得简单而高效。在这篇文章中,我们将使用Vue3的setup语法糖,结合本地存储,来创建一个基础的购物车功能。
项目结构
首先,让我们搭建项目的基础结构。我们将创建一个名为ShoppingCart.vue
的组件,包含以下几个部分:
- 商品列表
- 购物车
- 本地存储的管理
初始化项目
如果你还没有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的响应式特性,使得界面能够实时更新。通过本地存储,我们能够保证用户的购物车数据不会在页面刷新或关闭后丢失。
最后问候亲爱的朋友们,并邀请你们阅读我的全新著作