【vue3系列实战二】vue3 + pinia 购物车系统

最新推荐文章于 2025-05-19 20:38:29 发布
最新推荐文章于 2025-05-19 20:38:29 发布
阅读量813 收藏 24
点赞数 29
分类专栏： vue3系列实战 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48032163/article/details/148038823
版权

Hello！宝子们，之前我们实现了vue3系列实战一：todolist，今天我们继续我们的vue3系列实战二：vue3完整的购物车系统，我相信每个前端开发人员绕不开的一个系统都是商城系统，无论你是企业开发还是个人开发多多少少都会接触到电商项目，话不多说，让我们开始今天的内容吧！

项目效果展示：

在这里插入图片描述

技术栈：vue3 + vite + elementplus + tailwindcss + pinia。

一：项目搭建和安装依赖库

vite官网

elementplus官网

 npm create vite@latest vue3-cart -- --template vu+ts

在这里插入图片描述

安装elementplus：

 npm install element-plus  @element-plus/icons-vue

接下来我们在main.ts里面配置相关依赖

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app.use(ElementPlus);
app.mount("#app");

在App.vue,添加测试代码

<script setup lang="ts">
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
</script>

<template>
  <div>
    <el-button :icon="Search" circle />
    <el-button type="primary" :icon="Edit" circle />
    <el-button type="success" :icon="Check" circle />
    <el-button type="info" :icon="Message" circle />
    <el-button type="warning" :icon="Star" circle />
    <el-button type="danger" :icon="Delete" circle />
  </div>
</template>

<style scoped></style>

在命令行运行项目

npm run dev

在这里插入图片描述
在这里插入图片描述

在浏览器中访问，得到一下画面，即代表项目和elementplus库创建成功：
在这里插入图片描述

接下来我们安装tailwindcss官网，这是一个css样式库，他可以很方便的让我们在template里面书写样式，大家可以在官网学习一下使用，非常简单方便。

注意：我使用的是的是tailwindcss x3版本 ，最新版本是 x4版本，大家可以自己选择版本。

安装依赖：

 npm install -D tailwindcss@3 postcss autoprefixer

初始化文件：会生成两个配置文件。

px tailwindcss init -p

在这里插入图片描述
在tailwind.config.js里配置

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

在style.css里面配置

@tailwind base;
@tailwind components;
@tailwind utilities;

在这里插入图片描述
最后在App.vue 使用tailwindcss
在这里插入图片描述
最终得到页面：
在这里插入图片描述

上节课我们没有使用状态工具，所以我们的数据都是放在最顶层的父级组件里面，我们组件之间通信就比较麻烦，现在我们使用最新的pinia状态管理库，这也是官方最推荐的库。

 npm install pinia

在main.ts添加依赖

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "./style.css";
import "element-plus/dist/index.css";
import App from "./App.vue";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import { createPinia } from "pinia";
const pinia = createPinia();

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app.use(ElementPlus);
app.use(pinia);
app.mount("#app");

现在让我们开始快速学习使用pinia:
首先使用defineStore定义一个counter store,我使用的是函数式的写法，大家也可以使用之前vue常用的选项写法，count就是全局的一个状态，你可以定义任意类型，可以在任何地方对count进行访问，对count进行增删改查我建议大家在方法中进行操作（可以理解为action）。
在这里插入图片描述
在App.vue进行测试：

<script setup lang="ts">
import { useCounterStore } from "./store/useCartStore";

const store = useCounterStore();
</script>

<template>
  <div>
    <h1>App</h1>
    <p>counter: {{ store.count }}</p>

    <button @click="store.increment()">Add</button>
  </div>
</template>

<style scoped></style>

效果图展示：
在这里插入图片描述

注意：请不要这样使用store。

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useCounterStore } from "./store/useCartStore";

const store = useCounterStore();

const { count } = useCounterStore(); // 这样解构是不生效的

const { count: refCount } = storeToRefs(store); // 这样解构是生效的
</script>

<template>
  <div>
    <h1>App</h1>
    <p>counter: {{ store.count }}</p>
    <p>count: {{ count }}</p>
    <p>refCount: {{ refCount }}</p>

    <button @click="store.increment()">Add</button>
  </div>
</template>

<style scoped></style>

效果图展示：

在这里插入图片描述
测试完成：让我们开始购物车项目！

二：功能实现

我们测试时候使用了pinia的函数式写法，所以我们正式项目就使用选项式写法，大家可以根据自己的想法来实现功能！
首先实现商品类型的定义：
在这里插入图片描述

// 商品类型
interface Product {
  id: number; // 商品ID·
  name: string; // 商品名称
  price: number; // 商品价格
  originalPrice: number; // 商品原价
  image: string; // 商品图片
  colors: string[]; // 商品颜色
  sizes: string[]; // 商品尺码
  description: string; // 商品描述
}

// 购物车项类型
interface CartItem {
  id: string; // 唯一ID
  product: Product; // 商品信息
  selectedSize: string; // 选择的尺码
  selectedColor: string; // 选择的颜色
  quantity: number; // 数量
  totalPrice: number; // 小计
}

接下来定义一个购物车store,让我们来思考一下如何设计一个购物车的store，首先，我们需要的是一个全局状态的state,然后对这个state进行增删改查，对这个state进行维护，比如当我们对state新增的时候需要考虑的是，当商品是否已经存在在购物车中？那么我们是否是新增商品还是对商品的数量进行新增，减少商品同理。

代码如下：

export const useCartStore = defineStore("cart", {
  state: () => ({
    items: [] as CartItem[],
  }),
  getters: {},
  actions: {
    // 添加商品到购物车
    addToCart(product: Product, selectedSize: string, selectedColor: string) {
      // 生成唯一ID
      const itemId = `${product.id}-${selectedSize}-${selectedColor}`;
      // 检查商品是否已在购物车中
      const existingItem = this.items.find((item) => item.id === itemId);
      if (existingItem) {
        // 如果已存在，增加数量
        existingItem.quantity++;
        existingItem.totalPrice =
          existingItem.product.price * existingItem.quantity;
      } else {
        // 如果不存在，添加新商品
        const newItem: CartItem = {
          id: itemId,
          product,
          selectedSize,
          selectedColor,
          quantity: 1,
          totalPrice: product.price,
        };

        this.items.push(newItem);
      }

      // 显示添加成功提示
      ElMessage({
        type: "success",
        message: "商品已添加到购物车",
      });
    },
    // 从购物车移除商品
    removeFromCart(itemId: string) {
      this.items = this.items.filter((item) => item.id !== itemId);
    },
    // 更新购物车商品数量
    updateQuantity(itemId: string, quantity: number) {
      const item = this.items.find((item) => item.id === itemId);

      if (item) {
        item.quantity = quantity;
        item.totalPrice = item.product.price * quantity;
      }
    },
    // 清空购物车
    clearCart() {
      this.items = [];
    },
  },
});

现在我们来写页面。

来到App.vue，实现基础的商品列表布局，样式和数据不一步步带大家写了，我们着重完成功能！

<template>
  <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4 mt-20">商品列表</h1>
    <el-row :gutter="20">
      <el-col
        v-for="product in products"
        :key="product.id"
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
        class="mb-4"
      >
        <div
          class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
        >
          <img
            :src="product.image"
            :alt="product.name"
            class="w-full h-48 object-cover"
          />
          <div class="p-4">
            <h3 class="text-lg font-semibold mb-2">{{ product.name }}</h3>
            <p class="text-gray-600 text-sm mb-2">{{ product.description }}</p>

            <div class="flex items-center mb-2">
              <span class="text-red-500 font-bold text-lg"
                >¥{{ product.price }}</span
              >
              <span class="text-gray-400 line-through ml-2 text-sm"
                >¥{{ product.originalPrice }}</span
              >
            </div>

            <el-button type="primary" class="w-full"> 加入购物车 </el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const products = ref([
  {
    id: 1,
    name: "商品一",
    price: 1299,
    originalPrice: 1499,
    image: "https://picsum.photos/id/1/400/400",
    colors: ["black", "white", "red", "blue"],
    sizes: ["38", "39", "40", "41", "42", "43", "44"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 2,
    name: "商品二",
    price: 1399,
    originalPrice: 1599,
    image: "https://picsum.photos/id/2/400/400",
    colors: ["black", "white", "gray", "pink"],
    sizes: ["38", "39", "40", "41", "42", "43", "44"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 3,
    name: "商品三",
    price: 599,
    originalPrice: 699,
    image: "https://picsum.photos/id/3/400/400",
    colors: ["black", "white", "blue", "green"],
    sizes: ["S", "M", "L", "XL", "XXL"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 4,
    name: "商品四",
    price: 899,
    originalPrice: 999,
    image: "https://picsum.photos/id/4/400/400",
    colors: ["black", "gray", "navy", "olive"],
    sizes: ["S", "M", "L", "XL", "XXL"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 5,
    name: "商品五",
    price: 399,
    originalPrice: 499,
    image: "https://picsum.photos/id/5/400/400",
    colors: ["black", "gray", "blue", "pink"],
    sizes: ["S", "M", "L", "XL"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 6,
    name: "商品六",
    price: 1199,
    originalPrice: 1399,
    image: "https://picsum.photos/id/6/400/400",
    colors: ["black", "navy", "red", "gray"],
    sizes: ["S", "M", "L", "XL", "XXL"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 7,
    name: "商品七",
    price: 1099,
    originalPrice: 1299,
    image: "https://picsum.photos/id/7/400/400",
    colors: ["white", "black", "pink", "blue"],
    sizes: ["38", "39", "40", "41", "42", "43", "44"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 8,
    name: "商品八",
    price: 1199,
    originalPrice: 1399,
    image: "https://picsum.photos/id/8/400/400",
    colors: ["black", "white", "red", "blue"],
    sizes: ["38", "39", "40", "41", "42", "43", "44"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
]);
</script>

<style scoped></style>

现在的效果是：
在这里插入图片描述
现在我们来实现购物车列表，我们现在在右上角新增一个按钮，使用弹窗的方式进行购物车列表的展示，大家可以用新页面展示也行，根据自己的想法来。
在这里插入图片描述
在这里插入图片描述
App.vue完整代码如下：

<template>
  <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4 mt-20">商品列表</h1>
    <!-- 购物车按钮 -->
    <el-button
      type="primary"
      class="fixed right-4 bottom-4 z-50 shadow-lg"
      @click="showCart = true"
    >
      <el-icon :size="20"><ShoppingCart /></el-icon>
      <span class="ml-2">10</span>
    </el-button>

    <!-- 购物车弹窗 -->
    <el-dialog v-model="showCart" title="购物车" width="80%">
      <cart-list />
      <template #footer>
        <el-button>继续购物</el-button>
        <el-button type="primary">去结算</el-button>
      </template>
    </el-dialog>

    <el-row :gutter="20">
      <el-col
        v-for="product in products"
        :key="product.id"
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
        class="mb-4"
      >
        <div
          class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
        >
          <img
            :src="product.image"
            :alt="product.name"
            class="w-full h-48 object-cover"
          />
          <div class="p-4">
            <h3 class="text-lg font-semibold mb-2">{{ product.name }}</h3>
            <p class="text-gray-600 text-sm mb-2">{{ product.description }}</p>

            <div class="flex items-center mb-2">
              <span class="text-red-500 font-bold text-lg"
                >¥{{ product.price }}</span
              >
              <span class="text-gray-400 line-through ml-2 text-sm"
                >¥{{ product.originalPrice }}</span
              >
            </div>

            <el-button type="primary" class="w-full"> 加入购物车 </el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import CartList from "./components/CartList.vue";
const showCart = ref(false);

const products = ref([
  {
    id: 1,
    name: "商品一",
    price: 1299,
    originalPrice: 1499,
    image: "https://picsum.photos/id/1/400/400",
    colors: ["black", "white", "red", "blue"],
    sizes: ["38", "39", "40", "41", "42", "43", "44"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 2,
    name: "商品二",
    price: 1399,
    originalPrice: 1599,
    image: "https://picsum.photos/id/2/400/400",
    colors: ["black", "white", "gray", "pink"],
    sizes: ["38", "39", "40", "41", "42", "43", "44"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 3,
    name: "商品三",
    price: 599,
    originalPrice: 699,
    image: "https://picsum.photos/id/3/400/400",
    colors: ["black", "white", "blue", "green"],
    sizes: ["S", "M", "L", "XL", "XXL"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 4,
    name: "商品四",
    price: 899,
    originalPrice: 999,
    image: "https://picsum.photos/id/4/400/400",
    colors: ["black", "gray", "navy", "olive"],
    sizes: ["S", "M", "L", "XL", "XXL"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 5,
    name: "商品五",
    price: 399,
    originalPrice: 499,
    image: "https://picsum.photos/id/5/400/400",
    colors: ["black", "gray", "blue", "pink"],
    sizes: ["S", "M", "L", "XL"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 6,
    name: "商品六",
    price: 1199,
    originalPrice: 1399,
    image: "https://picsum.photos/id/6/400/400",
    colors: ["black", "navy", "red", "gray"],
    sizes: ["S", "M", "L", "XL", "XXL"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 7,
    name: "商品七",
    price: 1099,
    originalPrice: 1299,
    image: "https://picsum.photos/id/7/400/400",
    colors: ["white", "black", "pink", "blue"],
    sizes: ["38", "39", "40", "41", "42", "43", "44"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 8,
    name: "商品八",
    price: 1199,
    originalPrice: 1399,
    image: "https://picsum.photos/id/8/400/400",
    colors: ["black", "white", "red", "blue"],
    sizes: ["38", "39", "40", "41", "42", "43", "44"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
]);
</script>

<style scoped>
.fixed {
  position: fixed;
  top: 4rem;
  right: 6rem;
}
</style>

Cartlist.vue代码如下：

<template>
  <div>
    <div v-if="cartItems.length === 0" class="text-center text-gray-500">
      购物车是空的
    </div>
    <div v-else class="space-y-4">
      <div
        v-for="(item, index) in cartItems"
        :key="index"
        class="flex items-center border-b pb-4"
      >
        <img
          :src="item.product.image"
          class="w-16 h-16 object-cover rounded mr-4"
        />
        <div class="flex-1">
          <h3 class="font-semibold">{{ item.product.name }}</h3>
          <p class="text-sm text-gray-500">
            ¥{{ item.product.price }} x {{ item.quantity }}
          </p>
        </div>
        <div class="flex items-center gap-4">
          <el-input-number
            v-model="item.quantity"
            :min="1"
            size="small"
            class="w-24"
          />
          <el-button type="danger" size="small"> 删除 </el-button>
        </div>
      </div>
      <div class="text-xl font-bold text-right">总价: ¥ 100</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { CartItem } from "../store/useCartStore";

const cartItems = ref<CartItem[]>([]);
</script>

<style scoped></style>

现在页面的效果是：
在这里插入图片描述
现在我们来实现加入购物车功能：
首先我们抽离商品列表组件：
在这里插入图片描述
在productList.vue组件里面进行购物车添加操作：
在这里插入图片描述
完整的productList.vue代码如下：

<template>
  <el-row :gutter="20">
    <el-col
      v-for="product in products"
      :key="product.id"
      :xs="24"
      :sm="12"
      :md="8"
      :lg="6"
      class="mb-4"
    >
      <div
        class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
      >
        <img
          :src="product.image"
          :alt="product.name"
          class="w-full h-48 object-cover"
        />
        <div class="p-4">
          <h3 class="text-lg font-semibold mb-2">{{ product.name }}</h3>
          <p class="text-gray-600 text-sm mb-2">{{ product.description }}</p>

          <div class="flex items-center mb-2">
            <span class="text-red-500 font-bold text-lg"
              >¥{{ product.price }}</span
            >
            <span class="text-gray-400 line-through ml-2 text-sm"
              >¥{{ product.originalPrice }}</span
            >
          </div>

          <el-button
            type="primary"
            class="w-full"
            @click="() => handleAdd(product)"
          >
            加入购物车
          </el-button>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useCartStore } from "../store/useCartStore";
const store = useCartStore(); // 使用购物车 store
const handleAdd = (product: any) => {
  store.addToCart(product, "s", "red"); // 调用 store 中的 addToCart 方法,颜色和size可以根据需要修改，我这里就不做这个功能了，请大家自己拓展
};
const products = ref([
  {
    id: 1,
    name: "商品一",
    price: 1299,
    originalPrice: 1499,
    image: "https://picsum.photos/id/1/400/400",
    colors: ["black", "white", "red", "blue"],
    sizes: ["38", "39", "40", "41", "42", "43", "44"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 2,
    name: "商品二",
    price: 1399,
    originalPrice: 1599,
    image: "https://picsum.photos/id/2/400/400",
    colors: ["black", "white", "gray", "pink"],
    sizes: ["38", "39", "40", "41", "42", "43", "44"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 3,
    name: "商品三",
    price: 599,
    originalPrice: 699,
    image: "https://picsum.photos/id/3/400/400",
    colors: ["black", "white", "blue", "green"],
    sizes: ["S", "M", "L", "XL", "XXL"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 4,
    name: "商品四",
    price: 899,
    originalPrice: 999,
    image: "https://picsum.photos/id/4/400/400",
    colors: ["black", "gray", "navy", "olive"],
    sizes: ["S", "M", "L", "XL", "XXL"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 5,
    name: "商品五",
    price: 399,
    originalPrice: 499,
    image: "https://picsum.photos/id/5/400/400",
    colors: ["black", "gray", "blue", "pink"],
    sizes: ["S", "M", "L", "XL"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 6,
    name: "商品六",
    price: 1199,
    originalPrice: 1399,
    image: "https://picsum.photos/id/6/400/400",
    colors: ["black", "navy", "red", "gray"],
    sizes: ["S", "M", "L", "XL", "XXL"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 7,
    name: "商品七",
    price: 1099,
    originalPrice: 1299,
    image: "https://picsum.photos/id/7/400/400",
    colors: ["white", "black", "pink", "blue"],
    sizes: ["38", "39", "40", "41", "42", "43", "44"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
  {
    id: 8,
    name: "商品八",
    price: 1199,
    originalPrice: 1399,
    image: "https://picsum.photos/id/8/400/400",
    colors: ["black", "white", "red", "blue"],
    sizes: ["38", "39", "40", "41", "42", "43", "44"],
    description:
      "商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述。",
  },
]);
</script>

<style scoped></style>

CartList.vue购物车组件获取响应式数据进行列表展示

<template>
  <div>
    <div v-if="items.length === 0" class="text-center text-gray-500">
      购物车是空的
    </div>
    <div v-else class="space-y-4">
      <div
        v-for="(item, index) in items"
        :key="index"
        class="flex items-center border-b pb-4"
      >
        <img
          :src="item.product.image"
          class="w-16 h-16 object-cover rounded mr-4"
        />
        <div class="flex-1">
          <h3 class="font-semibold">{{ item.product.name }}</h3>
          <p class="text-sm text-gray-500">
            ¥{{ item.product.price }} x {{ item.quantity }}
          </p>
        </div>
        <div class="flex items-center gap-4">
          <el-input-number
            v-model="item.quantity"
            :min="1"
            size="small"
            class="w-24"
          />
          <el-button type="danger" size="small"> 删除 </el-button>
        </div>
      </div>
      <div class="text-xl font-bold text-right">总价: ¥ 100</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCartStore } from "../store/useCartStore";
import { storeToRefs } from "pinia";
const store = useCartStore(); // 使用购物车 store
const { items } = storeToRefs(store); // 解构出购物车中的数据
</script>

<style scoped></style>

最终得到的效果是：

在这里插入图片描述

现在我们来实现后一个功能，购物车数量和总价，使用计算属性即可：
在这里插入图片描述

  getters: {
    totalQuantity(state) {
      // 计算总数量
      return state.items.reduce((total, item) => total + item.quantity, 0);
    },
    totalPrice(state) {
      // 计算总价
      return state.items.reduce(
        (total, item) => total + item.product.price * item.quantity,
        0
      );
    },
  },

总价：
在这里插入图片描述
总数量：
在这里插入图片描述
现在我们完成最后一个删除功能：
删除购物车商品：
在这里插入图片描述

<template>
  <div>
    <div v-if="items.length === 0" class="text-center text-gray-500">
      购物车是空的
    </div>
    <div v-else class="space-y-4">
      <div
        v-for="(item, index) in items"
        :key="index"
        class="flex items-center border-b pb-4"
      >
        <img
          :src="item.product.image"
          class="w-16 h-16 object-cover rounded mr-4"
        />
        <div class="flex-1">
          <h3 class="font-semibold">{{ item.product.name }}</h3>
          <p class="text-sm text-gray-500">
            ¥{{ item.product.price }} x {{ item.quantity }}
          </p>
        </div>
        <div class="flex items-center gap-4">
          <el-input-number
            v-model="item.quantity"
            :min="1"
            size="small"
            class="w-24"
          />
          <el-button
            type="danger"
            size="small"
            @click="() => handleDelete(item)"
          >
            删除
          </el-button>
        </div>
      </div>
      <div class="text-xl font-bold text-right">
        总价: ¥ {{ store.totalPrice }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCartStore, type CartItem } from "../store/useCartStore";
import { storeToRefs } from "pinia";
const store = useCartStore(); // 使用购物车 store
const { items } = storeToRefs(store); // 解构出购物车中的数据

const handleDelete = (item: CartItem) => {
  store.removeFromCart(item.id); // 调用 store 中的 removeFromCart 方法
};
</script>

<style scoped></style>

最终的效果展示：
在这里插入图片描述
总结：我们学会使用了状态管理工具：pinia,以及tailwindcss的使用，是不是特别方便呢？请大家认真练习，觉得有用请关注我，后续我会持续推出小练习系列，谢谢大家！

vue3+vite+pinia+element-plus的购物车
Sreat的博客
04-21 448
这个很简单 没有什么难度 直接上代码。最后一个 pinia。
从零开始：用 Vue 3 和 Pinia 构建简单购物车应用
mmc123125的博客
12-24 475
产品列表展示：用户可以看到所有商品。添加到购物车：点击商品后，添加到购物车。购物车查看与更新：用户可以查看购物车中的商品，修改数量，或删除商品。结算模拟：显示购物车总金额。状态管理：使用 Pinia 管理购物车状态和操作。组件拆分：将逻辑按功能拆分到不同组件中。事件通信：父子组件之间通过props和事件传递数据。响应式绑定：使用v-model实现用户交互的双向绑定。如果你想进一步优化，可以添加本地存储支持、API 接口集成或页面路由，构建更加完善的购物体验！
Vue3 + ts + pinia 写的购物车，vite ,webpacke
weixin_68903201的博客
11-16 2803
npm install pinia --save //安装pinianpm install pinia-plugin-persist --save //安装pinia-plugin-persist，数据持久化插件或者。
Vue3 + vite + Ts + pinia + 实战 + 源码 +electron（1）
m0_61927991的博客
02-05 910
Vue3+TS+项目+pinan
vue3 PC端项目构建，vue3+antd+vite+pinia+axios+sass
局外人LZ的博客
03-04 1803
本文只是大致讲了下vue3移动端项目搭建，具体的细节还是需要根据自己项目的需要进行调整。路由只封装了navigateTo、navigateBack，可以根据微信小程序路由api的逻辑https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 封装switchTab、reLaunch、redirectTo，如果有更好的方法可以忽略该路由封装，个人觉得小程序路由做的挺好。路径别名可配可不配，根据自己喜好就行。
购物车案例总结（vue3+vue-router+pinia+element-plus）
qq_50280292的博客
01-10 1431
简单购物车案例
Vue3.2+Pinia+VueRouter+Vite+TS环境搭建及知识点学习
qq_42717015的博客
01-12 1076
Vue3+vue-router+Vite+TS环境搭建及笔记
Vue3+Pinia—购物车实例
CherishTaoTao的博客
08-23 888
传送门点这里借鉴vuex官方例子修改本例子分为视频展示列表与购物车内容展示两个主要模块通过Pinia创建的实例来对商品的状态进行控制借用了vuex官方的例子来改造pinia比vuex轻便很多，不需要操作mutations。
vue3移动端项目构建，vue3+vant+vite+axios+pinia+sass
局外人LZ的博客
02-27 7054
本文只是大致讲了下vue3移动端项目搭建，具体的细节还是需要根据自己项目的需要进行调整。路由只封装了navigateTo、navigateBack，可以根据微信小程序路由api的逻辑https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 封装switchTab、reLaunch、redirectTo，如果有更好的方法可以忽略该路由封装，个人觉得小程序路由做的挺好。路径别名可配可不配，根据自己喜好就行。
基于Spring Boot+Vue 3+Element-Plus+Vue-Router+Pinia+Vant的电商管理系统源码
06-16
基于Spring Boot+Vue 3+Element-Plus+Vue-Router+Pinia+Vant的电商管理系统源码 项目经过严格测试，确保可以运行！ newbee-mall 项目是一套电商系统，包括 newbee-mall 商城系统及 newbee-mall-admin 商城后台管理...
基于Spring Boot+Vue 3+Element-Plus+Pinia+Vant的电商管理系统源码+项目说明.zip
01-08
1、基于Spring Boot+Vue 3+Element-Plus+Pinia+Vant的电商管理系统源码+项目说明.zip 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和...
VUE篇之自定义组件使用v-model
ae_pppppp的博客
05-15 248
该代码展示了如何在Vue.js中使用子组件和父组件进行双向数据绑定。子组件MyComponent包含一个时间选择器el-time-select，并通过v-model与父组件进行数据同步。子组件通过props接收父组件传递的value，并在内部创建副本innerValue以避免直接修改props。子组件通过watch监听value的变化，并在时间选择器值改变时触发input事件，更新父组件的formData。父组件通过v-model绑定formData，并实时显示当前选择的时间。这种方式实现了父子组件之间的数
Vue3——Watch侦听器
m0_74386799的博客
05-15 415
watch是⼀个⽤于观察和响应Vue响应式系统中数据变化的⽅法。它允许你指定⼀个数据源（可以是 响应式引⽤、计算属性、组件的属性等），当这个数据源的值发⽣变化时，你可以执⾏⼀些响应的副作 ⽤（side effects）。watch可以⽤来监听任何响应式数据的变化。手动指定监听对象。
javascript和vue的不同
xiaogaotongxue__的博客
05-16 630
基于 Object.defineProperty ()（Vue 2）或 Proxy（Vue 3）：Vue 自动追踪数据变化并更新 DOM。手动操作 DOM：通过document.querySelector()等方法获取 DOM 元素，然后直接修改其属性或内容。虚拟 DOM（Virtual DOM）：Vue 通过虚拟 DOM diff 算法高效更新真实 DOM，开发者无需手动操作。：数据和 DOM 自动同步，开发者只需关注数据的变化。：数据和 DOM 是分离的，需要手动维护两者的同步。
uniapp中的easycom工作机制
Bruce__taotao的博客
05-18 674
uni-app 中的 easycom 是一种自动组件注册机制，能够简化组件的使用流程，提升开发效率。通过 easycom，开发者无需在页面中手动引入和注册组件，直接使用组件标签即可。其工作原理是通过自动扫描 components 目录下的 .vue 和 .nvue 文件，将组件名作为标签名进行注册。easycom 在编译阶段生效，支持自定义匹配规则。配置方式是在 pages.json 中设置 easycom 属性，启用自动扫描并定义规则。easycom 的优点包括减少样板代码、提升维护性、支持按需引入等，但
【Vue】路由2——编程式路由导航、 两个新的生命周期钩子 以及 路由守卫、路由器的两种工作模式
最新发布
2301_80636070的博客
05-19 789
t=P1C7t=P1C7t=P1C7t=P1C7t=P1C7t=P1C7yihaohhh/我爱Vue - Gitee.comhttps://gitee.com/liu-yihao-hhh/i-love---vue/tree/master/37_src_%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E5%AF%BC%E8%88%AA。
【JS】vue3中组件命名问题
Kevin_Gates的专栏
05-15 300
在 Vue 3 的单文件组件中，组件的命名风格在 JavaScript 和模板中有所不同。JavaScript 中通常使用 PascalCase
Vue3学习（组合式API——父、子组件间通信详解）
岁岁岁平安的博客
05-17 996
本篇博客的核心内容：详细的学习和讲解了Vue3组合式API——父、子间组件通信。通过基本思想、核心注意点与步骤、综合案例依次演示父传子自定义属性(defineProps)，子传父自定义事件(defineEmits)的详细操作...
Vuex和Vue的区别
2401_87138834的博客
05-15 282
Vuex：在大型Vue应用中，当多个组件需要共享和协同管理状态时使用，如电商应用中的购物车功能、多页面应用中的用户登录状态管理等场景，能有效提升应用的可维护性和可扩展性。- Vuex：作用于整个应用程序，提供一个全局的状态存储，所有组件都可以访问和修改其中的状态，统一管理应用中多个组件共享的状态，如用户登录状态、全局配置信息等。- Vuex：是Vue.js应用程序的状态管理库，用于集中管理应用的全局状态，解决多个组件之间状态共享和传递的问题，让状态的更新和管理更有序、可预测。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值