vue3 appvue购物车

### Vue3 购物车功能实现 在 Vue3 项目中实现购物车功能，可以结合 Composition API 和 Vuex（或 Pinia）来管理状态。以下是一个基本的实现方案： #### 1. 状态管理 为了确保购物车数据在网络会话间的持久性，可以使用 Vuex 或 Pinia 来管理全局状态，并结合 `localStorage` 或 `sessionStorage` 存储购物车数据[^2]。 ```javascript // store.js (Vuex 示例) import { createStore } from 'vuex'; export default createStore({ state: { cartItems: JSON.parse(localStorage.getItem('cart')) || [], }, mutations: { addToCart(state, item) { const existingItem = state.cartItems.find(i => i.id === item.id); if (existingItem) { existingItem.quantity += item.quantity; } else { state.cartItems.push(item); } localStorage.setItem('cart', JSON.stringify(state.cartItems)); }, removeFromCart(state, itemId) { state.cartItems = state.cartItems.filter(item => item.id !== itemId); localStorage.setItem('cart', JSON.stringify(state.cartItems)); }, clearCart(state) { state.cartItems = []; localStorage.removeItem('cart'); }, }, actions: { addToCart({ commit }, item) { commit('addToCart', item); }, removeFromCart({ commit }, itemId) { commit('removeFromCart', itemId); }, clearCart({ commit }) { commit('clearCart'); }, }, getters: { cartTotal(state) { return state.cartItems.reduce((total, item) => total + item.price * item.quantity, 0); }, }, }); ``` #### 2. 组件实现 创建一个购物车组件，用于展示购物车内容并提供添加、删除和清空购物车的功能。 ```vue <template> <div> <h3>购物车</h3> <ul> <li v-for="item in cartItems" :key="item.id"> {{ item.name }} - {{ item.price }} x {{ item.quantity }} <button @click="removeFromCart(item.id)">移除</button> </li> </ul> <p>总价: {{ cartTotal }}</p> <button @click="clearCart">清空购物车</button> </div> </template> <script> import { mapState, mapGetters, mapActions } from 'vuex'; export default { computed: { ...mapState(['cartItems']), ...mapGetters(['cartTotal']), }, methods: { ...mapActions(['removeFromCart', 'clearCart']), }, }; </script> ``` #### 3. 商品列表组件 在商品列表页面中，为每个商品提供“添加到购物车”的按钮。 ```vue <template> <div> <h3>商品列表</h3> <ul> <li v-for="product in products" :key="product.id"> {{ product.name }} - {{ product.price }} <button @click="addToCart(product)">加入购物车</button> </li> </ul> </div> </template> <script> import { mapActions } from 'vuex'; export default { data() { return { products: [ { id: 1, name: '商品A', price: 10 }, { id: 2, name: '商品B', price: 20 }, { id: 3, name: '商品C', price: 30 }, ], }; }, methods: { ...mapActions(['addToCart']), }, }; </script> ``` #### 4. 持久化与合并匿名购物车 当用户登录后，可以将匿名购物车的内容合并到用户的个人购物车中。通过后端接口完成这一操作，并更新 Vuex 中的状态[^2]。 --- ### 注意事项 - 使用 `localStorage` 或 `sessionStorage` 时需要注意数据的安全性，避免敏感信息存储在客户端。 - 如果需要支持多用户场景，建议结合后端服务（如 AWS Serverless Shopping Cart[^1]）来管理购物车数据。 ---