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

1、效果展示

---

注意：这个演示图没有背景色，背景色建议在 App.vue 中新增代码实现全局背景色

<style>
	page {
   
		background-color: #f8f9fb;
	}
</style>

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.reduce((count, shop) => {
   
			return count + shop.items.filter(item => item.isChoose).reduce((shopCount, item) =>
				shopCount + item.num, 0);
		}, 0);
	});

	// 计算已选中商品的总价格
	const totalSelectedPrice = computed(() => {
   
		return state.cartItems.reduce((total, shop) => {
   
			return total + shop.items.filter(item => item.isChoose).reduce((shopTotal, item) =>
				shopTotal + item.price * item.num, 0);
		}, 0);
	});

	// 切换商品的选中状态
	const toggleItemChoose = (shopName, itemId) => {
   
		const shop = state.cartItems.find(shop => shop.shopName === shopName);
		console.log(shop);
		if (shop) {
   
			const cartItem = shop.items.find(cartItem => cartItem.id === itemId);
			if (cartItem