总结一份自己写购物车的思考

知乎文章地址：https://zhuanlan.zhihu.com/p/53707400

最近在继续完善自己之前写的一个demo:

yaodebian/taobaoApp​github.com

之前并没有对购物车进行特别的设计，仅仅是将一个个商品添加到购物车列表，也没有做一些处理，比如：列表是按照商家来分类呈现的等等。。。以下是我目前为了学习写的一个demo:

接下来，记录下我的一个思考：

一. 用户行为分析

我在想，一个购物车中，用户需要做什么呢？

二. 购物车的具体组成部分

三. 购物车商品选取的基本思路

首先，从一个基本的商品列表开始，假设我们的商品列表如下（未根据商家进行分类）：

该商品列表我们通过html中的多选表单来进行选取（checkbox），并将他们的值通过一个数组来表示，如："checkVals: [false, false, false]"，接着同样的，我们用checkbox来对全选按钮进行选取，并将它的值通过一个变量checkAllItem（初始化为false）来绑定。

接着，在基于vuejs框架的环境下，我们可以通过watch监听checkVals，当其值从部分为true变为全部为true，则将checkAllItem的值设为true；相反，当从全为true变为部分true，则将checkAllItem的值设为false。

上面是从商品项选取角度考虑，如果从全选的角度来看，则我们直接给全选按钮绑定一个click时间触发函数，如：

    /**
     * 全选按钮触发
     */
    selectAll() {
      this.checkAllItem = !this.checkAllItem
      if (this.checkAllItem) {
        for (let item in this.checkVals) {
          Vue.set(this.checkVals, item, true)
        }
      } else {
        for (let item in this.checkVals) {
          Vue.set(this.checkVals, item, false)
        }
      }
    }

四. 对购物车列表通过商铺的形式进行分类

为了将购物车列表以商家的形式呈现，我们将以商家分类的每个项单独提取出来，封装成一个组件来使用（商家作为全选按钮，所属商品形成商品列表）。我们直接看下面这张图，前面所说的组件指的是下面的列表项。

上面的购物车列表和列表项均采用“第三部分”提到的结构进行实现，为此我们对于购物车列表形成了类似如下的数据结构：

我们通过对列表项组件中的checkVals的监听，将某些状态变化反馈到上一层的购物车列表（父组件）中，同时也从父组件将数据反馈到子组件。

五. 购物车支付

为了方便购物车的支付，我们在监听每个商品的选中状态时，将选中的商品的某些数据保存下来，这样我们在支付操作时即可通过这些数据将数据库中的购物车数据进行清空。（目前的demo在进行购物车支付时没有进行页面跳转，故而另外存取了某些数据方便删除vuex中存取的数据）