【vue3.0】14.0 某东到家（十四）——购物车

目前页面如下：

image.png

新建组件src\views\shop\Cart.vue:

image.png

进一步完善页面：

image.png

进一步优化style

......

加入购物车的数据存储

首先需要根据商铺的不同存储不同的购物车信息。
这里我们需要运用vuex的store。
这里预设src\store\index.js中将要存储的数据结构如下：

import { createStore } from 'vuex'

export default createStore({
  state: {
    cartList: {
      // 第一层级：商铺的id
      // 第二层内容是商品内容以及购物数量
      // shopId: {
      //   productID: {
      //     _id: '1',
      //     name: '番茄250g/份',
      //     imgUrl: '/i18n/9_16/img/tomato.png',
      //     sales: 10,
      //     price: 33.6,
      //     oldPrice: 39.6,
      //     count: 0
      //   }
      // }
    }
  },
  mutations: {},
  actions: {},
  modules: {}
})

调整优化src\views\shop\Content.vue关于加入购物车的逻辑

image.png

进一步优化：
src\store\index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    cartList: {
      // 第一层级：商铺的id
      // 第二层内容是商品内容以及购物数量
      // shopId: {
      //   productID: {
      //     _id: '1',
      //     name: '番茄250g/份',
      //     imgUrl: '/i18n/9_16/img/tomato.png',
      //     sales: 10,
      //     price: 33.6,
      //     oldPrice: 39.6,
      //     count: 0
      //   }
      // }
    }
  },
  mutations: {
    changeItemToCart(state, payload) {
      const { shopId, productId, productInfo, num } = payload
      console.log(shopId, productId, productInfo)
      let shopInfo = state.cartList[shopId]
      if (!shopInfo) {
        shopInfo = {}
      }

      let product = shopInfo[productId]
      if (!product) {
        product = productInfo // 初始化
        product.count = 0
      }

      product.count += num
      if (product.count <= 0) {
        shopInfo[productId].count = 0
      }
      shopInfo[productId] = product
      // 赋值
      state.cartList[shopId] = shopInfo
    }
  },
  actions: {},
  modules: {}
})

src\views\shop\Content.vue代码优化如下,利用vuex实现购物车增减功能：

image.png

至此，src\views\shop\Content.vue完整代码如下：

完善购物车下栏的交互逻辑：
src\views\shop\Cart.vue

最终效果如下：

image.png