Vue + Vuex 实现购物车

购物车demo

功能点拆分

• 在商品详情页点击添加购物车按钮，对应商品将传到购物车页面
• 购物车页面顶部商品数量展示
• 购物车页面商品列表展示
• 商品选择和取消选择
• 底部对选择的商品进行金额合计

购物车的逻辑

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

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

问题的关键是如何将用户选择的商品数据传递到购物车组件。

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

// GoodsListItem.vue
// 首页商品被点击
this.$router.push('/detail/' + this.goodsItem.iid)

// Detail.vue
// 拿到用户点击商品的iid
<detail-bottom-bar @addCart="addToCart" />
this.iid = this.$route.params.iid

// DetailBottomBar.vue
// 点击添加到购物车
this.$emit("addCart")

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

可是商品详情页和购物车界面并没有构成明确的父子关系。

这时可以借助 Vuex 进行状态管理，状态管理有点术语了，其实可以将其当成一个全局的数据对象。

Vuex

Vuex 的出现打破了组件之间的阶级，哪个组件都可以向 Vuex 直接索要数据。

监听加入购物车

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

// Detail.vue
// 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.传到Vuex中
this.$store.dispatch("addCart", product)

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

当然，这里有些条件需要判断，如果列表中已有该商品，那么只需将商品的数量加1即可。

对于新的产品类型，对其加入数量属性并初始化为1。

顶部数量展示

顶部数量展示

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

商品列表展示

商品列表展示

<!-- GoodList.vue 拿到 cartList -->
<script>
computed: {
  ...mapGetters(["cartList"])
}
</script>

<!-- 将单个的商品数据传给 cartListItem.vue -->
<cart-list-item 
v-for="(item, index) in cartList" 
:key="index"
:item-info="item">
</cart-list-item>

<!-- cartListItem.vue 接收单个商品数据并展示 -->
<script>
props: {
  itemInfo: {
    type: Object,
    default() {
      return {}
    }
  }
</script>
<div class="item-img">
<img :src="itemInfo.image" alt="商品图片">
</div>
<div class="item-info">
<div class="item-title">
  {{itemInfo.title}}
</div>
<div class="item-dess">
  {{itemInfo.desc}}
</div>
<div class="info-bottom">
  <div class="item-price left">
    {{itemInfo.price}}
  </div>
  <div class="item-count right">
    x{{itemInfo.count}}
  </div>
</div>

下篇商品选择和取消选择，总金额计算，计算商品数量，计算金额。