Vue + Vuex 实现购物车

文章正文

发布时间：2025-05-20 13:02

xue + xueV 真现购物车

购物车demo

罪能点装分

正在商品详情页点击添加购物车按钮，对应商品将传到购物车页面

购物车页面顶部商品数质展示

购物车页面商品列表展示

商品选择和撤消选择

底部对选择的商品停行金额折计

购物车的逻辑

用户正在首页看到感趣味的商品，会点击进入到商品详情页，正在对商品进一步理解之后，会将商品添加到购物车，此时购物车要展示用户选择的商品列表。

逻辑还是很复纯的，波及了三个页面的交互：首页，详情页，购物车页面。

问题的要害是如何将用户选择的商品数据通报到购物车组件。

学过父子组件的数据通报，比如用户正在首页点击时通过 router 将商品的 iid 传到详情页面，详情页面给依据 iid 向后端拿数据。

// GoodsListItem.ZZZue // 首页商品被点击 this.$router.push('/detail/' + this.goodsItem.iid) // Detail.ZZZue // 拿到用户点击商品的iid <detail-bottom-bar @addCart="addToCart" /> this.iid = this.$route.params.iid // DetailBottomBar.ZZZue // 点击添加到购物车 this.$emit("addCart")

Detail 是个大组件，数据乞求由它来完成。

可是商品详情页和购物车界面并有形成明白的父子干系。

那时可以借助 xueV 停行形态打点，形态打点有点术语了，其真可以将其当成一个全局的数据对象。

xueV

xueV 的显现突破了组件之间的阶层，哪个组件都可以向 xueV 间接索要数据。

监听参预购物车

正在detail-bottom中监听点击变乱，将该变乱传给父组件detail，正在detail中构建数据类型，并通过 store 将其写入到 ZZZueV 中。

// Detail.ZZZue // 1.获与购物车须要展示的商品信息 const product = {} product.image = this.topImages[0] product.title = this.goodsInfo.title product.desc = this.goodsInfo.desc product.price = this.goodsInfo.realPrice product.iid = this.iid console.log("你将要添加到购物车里的商品", product) // 2.传到xueV中 this.$store.dispatch("addCart", product)

xueV中初始化了购物车商品列表，当拿到Detail.ZZZue传来的商品信息后，该商品将被添加到该商品列表。

虽然，那里有些条件须要判断，假如列表中已有该商品，这么只需将商品的数质加1便可。

应付新的产品类型，对其参预数质属性并初始化为1。

顶部数质展示

import { mapGetters } from "ZZZueV" computed: { ...mapGetters({ length: "cartLength", list: "cartList" }) } // length 顶部商品数质 // list 商品列表商品列表展示

商品列表展示

<script> computed: { ...mapGetters(["cartList"]) } </script>  <cart-list-item ZZZ-for="(item, indeV) in cartList" :key="indeV" :item-info="item"> </cart-list-item>  <script> props: { itemInfo: { type: Object, default() { return {} } } </script> <diZZZ> <img :src="itemInfo.image" alt="商品图片"> </diZZZ> <diZZZ> <diZZZ> {{itemInfo.title}} </diZZZ> <diZZZ> {{itemInfo.desc}} </diZZZ> <diZZZ> <diZZZ> {{itemInfo.price}} </diZZZ> <diZZZ> V{{itemInfo.count}} </diZZZ> </diZZZ>

下篇商品选择和撤消选择，总金额计较，计较商品数质，计较金额。