Uniapp + Vue3 + Vite +Uview + Pinia 实现购物车功能（最新附源码保姆级）

1、效果展示

2、安装 Pinia 和 Uview

官网

https://pinia.vuejs.org/zh/getting-started.html

安装命令

cnpm install pinia

Uiew 的安装以及配置参照我的这篇文章

Uniapp + Vite + Vue3 + uView + Pinia 实现自定义底部 Tabbar（最新保姆级教程）

3、配置 Pinia

• main.js

import { createPinia } from 'pinia'
const app = createSSRApp(App);
app.use(pinia);

• cart.js

// src/pages/store/cart/cart.js
import { defineStore } from 'pinia';
import { reactive, computed } from 'vue';export const useCartStore = defineStore('cart', () => {// 用 reactive 管理购物车数据const state = reactive({cartItems: [], // 购物车商品列表allChose: false // 全选状态});// 设置购物车数据const setCartItems = (items) => {state.cartItems = items.map(item => ({...item,isChoose: false, // 初始化为未选中状态num: item.num || 1 // 初始化数量}));saveCartToLocalStorage(); // 每次设置后将数据持久化};// 计算已选中的商品数量const selectedItemsCount = computed(() => {return state.cartItems.filter(item => item.isChoose).reduce((count, item) => count + item.num, 0);});// 计算已选中商品的总价格const totalSelectedPrice = computed(() => {return state.cartItems.filter(item => item.isChoose).reduce((total, item) => total + item.price * item.num, 0);});// 切换商品的选中状态const toggleItemChoose = (item) => {const cartItem = state.cartItems.find(cartItem => cartItem.id === item.id);if (cartItem) {cartItem.isChoose = !cartItem.isChoose;}updateAllChoseStatus(); // 每次切换选中状态后更新全选状态saveCartToLocalStorage();};// 修改商品数量const changeItemQuantity = (item, quantity) => {const cartItem = state.cartItems.find(cartItem => cartItem.id === item.id);if (cartItem) {cartItem.num = quantity;}saveCartToLocalStorage();};// 切换全选状态const toggleAllChose = () => {state.allChose = !state.allChose;state.cartItems.forEach(item => {item.isChoose = state.allChose;});saveCartToLocalStorage();};// 更新全选状态const updateAllChoseStatus = () => {state.allChose = state.cartItems.every(item => item.isChoose);};// 将购物车数据保存到 localStorageconst saveCartToLocalStorage = () => {localStorage.setItem('cartItems', JSON.stringify(state.cartItems));};// 从 localStorage 中恢复购物车数据const loadCartFromLocalStorage = () => {const savedCart = localStorage.getItem('cartItems');if (savedCart) {state.cartItems = JSON.parse(savedCart);}};return {state,setCartItems, // 暴露 setCartItems 方法selectedItemsCount,totalSelectedPrice,toggleItemChoose,changeItemQuantity,toggleAllChose,loadCartFromLocalStorage};
});

4、页面展示

<template><view class=""><view class="card"><template v-for="(item, index) in state.cartItems" :key="index"><view class="cart-data card-shadow"><view><up-checkbox :customStyle="{marginBottom: '8px'}" usedAlone v-model:checked="item.isChoose"@change="toggleItemChoose(item)"></up-checkbox></view><view class="cart-image"><up-image :src="item.image" mode="widthFix" height="200rpx" width="220rpx"radius="10"></up-image></view><view><view class="cart-right"><view style="margin-bottom: 10rpx;">{{item.title}}</view><view style="margin-bottom: 20rpx;font-size: 26rpx;color: #7d7e80;">{{item.type}}</view><view class="" style="display: flex;align-items: center;"><up-text mode="price" :text="item.price"></up-text><view class="" style="width: 10rpx;"></view><up-number-box v-model="item.num" @change="val => changeItemQuantity(item, val.value)"min="1"></up-number-box></view></view></view></view></template></view><view class="foot card"><view class="card-connect"><up-checkbox :customStyle="{marginBottom: '8px'}" usedAlone v-model:checked="state.allChose"@change="toggleAllChose"></up-checkbox><view class="" style="display: flex; align-items: center;"><view style="font-size: 28rpx;">全选</view><view style="padding-left: 20rpx;font-size: 24rpx;">已选{{selectedItemsCount}}件,合计</view><view class="" style="display: flex;flex: 1;"><up-text mode="price" :text="totalSelectedPrice" color="red" size="18"></up-text></view></view><view class="" style="width: 20rpx;position: relative;"></view><view class="" style="position: absolute;right: 40rpx;"><view class="" style="display: flex;"><up-button type="error" text="去结算" shape="circle" style="width: 150rpx;"></up-button></view></view></view></view></view>
</template><script setup>import {ref,computed,onMounted,watch} from 'vue';import {useCartStore} from '@/pages/store/cart/cart.js'import {storeToRefs} from "pinia";// 使用 Pinia storeconst cartStore = useCartStore();// 获取状态和操作const {state,selectedItemsCount,totalSelectedPrice,} = storeToRefs(cartStore);const {toggleItemChoose,changeItemQuantity,toggleAllChose} = cartStore;onMounted(async () => {// 模拟 API 请求获取购物车数据const response = await fetchCartData();cartStore.setCartItems(response);});// 模拟 API 请求函数async function fetchCartData() {return [{id: 1,isChoose: false,image: "https://gw.alicdn.com/imgextra/i3/2218288872763/O1CN01rN6Cn91WHVIflhWLg_!!2218288872763.jpg",title: "散装土鸡蛋  360枚 40斤",type: "40斤 正负25g",price: 29.9,num: 1},{id: 2,isChoose: false,image: "https://gw.alicdn.com/imgextra/i1/2218288872763/O1CN01DipCdH1WHVIqTtCQR_!!0-item_pic.jpg",title: "散装土鸡蛋  360枚 40斤",type: "40斤 正负25g",price: 29.9,num: 1}];}
</script><style lang="scss" scoped>.foot {position: fixed;bottom: 0;left: 0;width: 90%;/* 占据全宽 */height: 100rpx;/* Tabbar 高度 */background-color: #FFF;display: flex;align-items: center;.card-connect {display: flex;align-items: center;justify-content: space-between;}}.card {margin: 20rpx;padding: 20rpx;background-color: #FFF;border-radius: 20rpx;}.card-shadow {border-radius: 20rpx;box-shadow: 10rpx 10rpx 10rpx 10rpx rgba(0.2, 0.1, 0.2, 0.2);}.cart-data {margin-bottom: 40rpx;padding: 20rpx;display: flex;align-items: center;.cart-image {flex: 1;}.cart-right {display: flex;flex-direction: column;}}
</style>