商品加入购物车，vuex 管理状态

商品加入购物车，保存在store中。大概一下步骤：

1.实现点击加入购物车功能；

2.徽标数值的自动更新；

3.购物车商品的本地持久存储；

4.获取购物车商品并加载显示；

5.加载显示购物车列表时初始化numbox数量值；

6.实现购物车商品数量改变同步到store中；

7.购物车中商品的删除；

8.把store中商品的选中状态selected同步到页面上；

9.同步shopcar页面商品选中状态到store中保存；

10.勾选商品的总价和数量自动计算

一、将商品加入保存到store中

<mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>

拼接出一个对象，通过传参的形式，传给mutations中的方法，其中 numBoxCount 为 numbox 的值，即加入购物车的商品数，通过子组件调用父组件的方法，将值传给父组件得来；

//  添加至购物车
        addToShopCar(){
          this.ballFlag = !this.ballFlag;

        //  拼接出一个商品对象保存到store中、{id:商品id,count:要购买的数量,price:商品价格,selected:false}
          const YHHSelectShop = {
            id:this.id,
            count:this.numBoxCount,
            price:this.youHaoHuo.price,
            selected:true
          };
          this.$store.commit('YHHSelectShopAddToShopCar',YHHSelectShop)
        }
      }

在mutations中，将商品存入到 localStorage中持久化，

  YHHSelectShopAddToShopCar(state,YHHSelectShop) {

    // 假设购物车中没有找到
    var flag = false;

    state.shopCar.some(item => {
      if (item.id == YHHSelectShop.id) {
        item.count += parseInt(YHHSelectShop.count);
        flag = true;
        return true
      }
    });
    // 最终没有找到，就把商品加入购物车中
    if (!flag) {
      state.shopCar.push(YHHSelectShop)
    }
    // 存储到 localStorage
    localStorage.setItem('shopCar',JSON.stringify(state.shopCar))
  },

然后store再从localStorage中取数据 const shopCarItem = JSON.parse(localStorage.getItem('shopCar') || '[]'); shopCar: shopCarItem 

二、得到徽标数值，getters 中

  // 徽标数值
  getAllSelectShopCount(state){
    var allCount = 0;
    state.shopCar.forEach(item => {
      allCount += item.count
    });
    return allCount
  },

然后去APP.vue 显示徽标数值

      <router-link class="mui-tab-item-my" to="/shopcar">
        <span class="mui-icon mui-icon-extra mui-icon-extra-cart">
          <span class="mui-badge" id="shopCar">{{ $store.getters.getAllSelectShopCount }}</span></span>
        <span class="mui-tab-label">购物车</span>
      </router-link>

三、获取购物车中所有商品列表并加载显示，遍历shopcar中的每件商品得到id，请求数据

 // 获取到 store 中所有的商品
          async getShopCarList(){
            var idArr = [];
            var shopId;

            // 从store中拿到购物车中商品的id
            this.$store.state.shopCar.forEach(item => idArr.push(item.id));

            // 如果购物车中没有商品，直接返回
            if (idArr.length === 0) {
              return
            }
            // console.log(idArr)
            // 循环得到id，分别请求数据
              for (let i = 0;i < idArr.length;i++){

                shopId = parseInt(idArr[i]);
                // console.log(typeof (shopId))

                if (shopId >= 1 && shopId <= 40) {
                  const res = await this.$axios.get('/getshoplistshopcar/'+shopId,this.model);
                  // console.log(res)
                  if (res.status === 200) {
                    this.shopCarList = this.shopCarList.concat(res.data)
                  }
                } else if (shopId >= 41 && shopId <= 46) {
                  const res = await this.$axios.get('/getyouhaohuoshopcar/'+shopId,this.model);
                  // console.log(res)
                  if (res.status === 200) {
                    this.shopCarList = this.shopCarList.concat(res.data)
                  }
                }  else if (shopId >= 50 && shopId <= 139) {
                  const res = await this.$axios.get('/getyouhaohuoinfoshopcar/'+shopId,this.model);
                  // console.log(res)
                  if (res.status === 200) {
                    this.shopCarList = this.shopCarList.concat(res.data)
                  }
                } else if (shopId >= 140 && shopId <= 229) {
                  const res = await this.$axios.get('/getaiguangjieinfoshopcar/'+shopId,this.model);
                  // console.log(res)
                  if (res.status === 200) {
                    this.shopCarList = this.shopCarList.concat(res.data)
                  }
                } else if (shopId >= 230 && shopId <= 259) {
                  const res = await this.$axios.get('/getcainilikeshopcar/'+shopId,this.model);
                  // console.log(res)
                  if (res.status === 200) {
                    this.shopCarList = this.shopCarList.concat(res.data)
                  }
                }
              }
            // console.log(this.shopCarList)
          },

四、shopcar页面numbox的加载显示，getters 中

  // shopcar 中各个商品的 numbox 值
  getShopCarSelectCount(state){
    var shopCarCount = {};
    state.shopCar.forEach(item => {
      // 商品的id作为键，数量作为值
      shopCarCount[item.id] = item.count
    });
    return shopCarCount
  },

然后在shopcar页面，将值传给numbox子组件，子组件通过props接受Count值，

<NumBox 

:Count = "$store.getters.getShopCarSelectCount[item.id]"  // 商品件数转给子组件

:shopId = "item.id"  // 商品id传给子组件

></NumBox>

五、shopcar页面numbox改变同步到store中

mutations中

  // shopcar 页面修改 numbox
  updateShopCarCount(state,selectShop) {
    state.shopCar.some(item => {
      if (item.id == selectShop.id) {  //  item.id 类型为Number，selectShop.id 类型为string
        item.count = parseInt(selectShop.count);
        return true
      }
    });
    // 当修改完商品的数量，把最新的数量保存到本地存储中
    localStorage.setItem('shopCar',JSON.stringify(state.shopCar))
  }

shopcar-numbox组件中，调用mutations中的方法，将值传给mutations

 countChanged(){ // 数量改变
          // console.log(this.$refs.numBox.value)
          // 每当数量值改变，立即把当前最新的数量同步到 store 中，覆盖之前的数量值
          this.$store.commit("updateShopCarCount",{
            id:this.shopId,
            count:this.$refs.numBox.value
          })
        }

六、商品的删除

删两个部分，1.界面的商品数组中；2.store中

shopcar组件中

   // 取消订单
        remove(id,index){
        //    点击删除，把商品从 store 中根据传递的id删除
        //      同时把当前组件中的 shopCarList 中，对应要删除的那个商品使用index来删除
          this.shopCarList.splice(index,1);  // 删数组shopCarList中

          this.$store.commit('removeFromShopCar',id)  // 删store中
        }

mutations中

  //  根据id从store中的购物车中删除对应的数据
  removeFromShopCar(state,id) {
    state.shopCar.some((item,i) => {
      if (item.id == id) {
        state.shopCar.splice(i,1);
        return true
      }
    });
    localStorage.setItem('shopCar',JSON.stringify(state.shopCar))
  }

七、store 中商品选中的状态 selected 同步到页面上

getters 中

  // 商品选中状态
  getShopCarSelected(state) {
    var Obj = {};
    state.shopCar.forEach(item => {
      Obj[item.id] = item.selected
    });
    return Obj
  },

在shopcar页面switch中

            <mt-switch class="shopCar-switch"
              v-model="$store.getters.getShopCarSelected[item.id]">
            </mt-switch>

八、selected 状态改变同步到store中

mutations 中

  // 改变商品选中
  updateShopCarSelected(state,switchInfo) {
    state.shopCar.some(item => {
      if (item.id == switchInfo.id) {
        item.selected = switchInfo.selected
      }
    });
    localStorage.setItem('shopCar',JSON.stringify(state.shopCar))
  }

shopcar中，将id及状态传给mutations

            <mt-switch class="shopCar-switch"
              v-model="$store.getters.getShopCarSelected[item.id]"
              @change="selectedChange(item.id,$store.getters.getShopCarSelected[item.id])">
            </mt-switch>

     // 改变商品选中
        selectedChange(id,newVal) {
          console.log(id+'---'+newVal)
          this.$store.commit('updateShopCarSelected',{ id , selected : newVal })
        }

九、勾选数量和总价的计算

getters中

// 得到 总价 和 总量
  getShopCarAllPriceAndCount(state) {
    var Obj = {
      COUNT:0,  // 勾选的数量
      PRICE:0   // 勾选的总价
    };
    state.shopCar.forEach(item => {
      if (item.selected) { // 被勾选
        Obj.COUNT += item.count;
        Obj.PRICE += item.price * item.count
      }
    });
    return Obj
  }

shopcar页面

              <p>
                已选 <span class="red">{{ $store.getters.getShopCarAllPriceAndCount.COUNT }}</span> 件，总价
                <span class="red">￥{{ $store.getters.getShopCarAllPriceAndCount.PRICE }}</span>（不含运费）
              </p>