Live2d Test Env

这两天将单个购物车写完了，这里只讲具体实现，css样式请自定，思路如下：

html: 一个input用于自定义购买数量；两个button用于增减ipt的value；一个锚点按钮用于加入购物车。

需求：点击input可以实现自定义数量，点击加减按钮可以在自定义val的基础上对val进行增减，但最低为1；

基本逻辑：通过比对购物车数组内是否存在点击的这个商品对象来决定添加商品个数还是添加这个商品到购物车

相关技术： VueX

实现过程：

1.在vuex的store内声明一个类型为数组的shopCart变量，用于存放所有购物出数据，初始为空

const state = {
  shopCartData:[]
  //添加到购物车的值是一个obj类型的数据对象，所以这个购物车就是多个数据对象组成的数组
}

2. 组件界面

   • 在data声明一个变量puchrchaseQuantity，默认为1，在input上使用v-model绑定这个变量

   • 在给两个增减btn添加点击事件：

//加
increase(){
        this.puchrchaseQuantity = parseInt(this.puchrchaseQuantity) + 1   // 防止在输入状态下值由数字转为字符串
      },

//减
decrease(){
       if(this.puchrchaseQuantity > 1){ //防止成为负数，最低为1
         this.puchrchaseQuantity = parseInt(this.puchrchaseQuantity) - 1
       }

3. 点击即加入购物车，给购物车添加点击事件addCart

PS:虽然标签是a，但是要使用vue-router进行路由跳转，所以要给该a的 href = 'javascript:;'阻止默认跳转事件

 //  加入购物车： 组件本身不允许操作store的值，需要向mutations发射数据，然后由mutations负责处理
      addCart(){
         //提交到mutations内的addShopCart函数
        this.$store.commit('addShopCart', {
          data:this.infoData,//单个数据
          num:parseInt(this.puchrchaseQuantity) //购买的数量
        })
      }

3. mutations界面

   1. 导入Vue

   2. 对组件发射的数据进行处理，在这里需要思考两个问题： 接收到的数据条目是否已在shopCartData数组中存在？判断存在的依据是什么？

import Vue from 'vue'
const mutations = {
  addShopCart(state,obj){  
    let haveData = false // 这个变量用于判断shopCartData中是否存在obj数据
// 1.如果存在，只需要给原shopCartData中匹配到的obj的数量上增加本次obj的数量；
    state.shopCartData.forEach(e=>{
        //对比shopCartData中子项的id与obj的id是否相同
      if(e.id === obj.data.id){ //如果为真，说明shopCartData中存在该obj,将haveDada改为真，并将本次该obj的num(也就是数量)添加到shopCartData里id一致的obj上，实现累加
        haveData = true 
        e.count += obj.num
      }
    })
//   2.剔除原shopCartData存在的obj,然后新增在shopCartData中新增这个obj
    if(!haveData){
      Vue.set(obj.data,'count',obj.num)// 先使用vue.set给这条数据的data设置count属性，这个属性标识了这个新obj的个数
      state.shopCartData.push(obj.data)讲这个数据条目的data推入cartData数组中
    }
    console.log(state.shopCartData);
  }
}

对mutations的详细讲解：

1. haveData: 存在，默认false

2. 如果本次obj的id与shopCartData中的某个obj的id相等，就将haveData改为真，并将本次obj的num与shopCartData的已存在obj的count相加；

3. 经过上一步剔除的剩下的是原shopCartData中没有的obj，此时haveData取反，则haveData为真：

   • 就使用Vue.set给这个obj添加count,count的值就是obj的num属性，也就是购买的数量

   • 然后通过state.shopCartData.push(obj)将这个obj推入到shopCartData中

import Vue from 'vue'
const mutations = {
  addShopCart(state,obj){ //state：vuex对象，obj:要添加到购物车总数的单个购物车对象
    let haveData = false //判断这条数据是否已在数组中存在
    state.shopCartData.forEach(e=>{
      if(e.id === obj.data.id){
        haveData = true
        e.count += obj.num
      }
    })
    //如果原数组中不存在这条数据，就使用vue.set添加这条数据
    if(!haveData){
      Vue.set(obj,'count',obj.num)
      state.shopCartData.push(obj)
    }
    console.log(state.shopCartData);
  }
}
export default mutations

这样，就是添加单个物品到购物车的所有逻辑处理

以上。