vuex封装购物车函数

js

 import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

    state:{
        shopCart:[],
        allChecked:false
    },
    mutations:{
        setShopCart(state,obj){
            state.shopCart.push(obj);
        },
        calcUp(state,index){
            state.shopCart[index].Num == state.shopCart[index].total?state.shopCart[index].total : state.shopCart[index].Num++
        },
        calcDown(state,index){
            state.shopCart[index].Num == 0?0 : state.shopCart[index].Num--
        },
        ShopVal(state,index){
            var shopVal = state.shopCart[index].Num;
            shopVal = isNaN(shopVal)? 0 :  Math.ceil(shopVal);
            shopVal = shopVal<0?0:shopVal;
            shopVal = shopVal>state.shopCart[index].total?state.shopCart[index].total:shopVal
            state.shopCart[index].Num = shopVal;
        },
        //单选
        SingleChange(state){
            var allChecked = true;
            for(var i=0; i<state.shopCart.length;i++){
                if(!state.shopCart[i].isChecked){
                    allChecked = false;
                    break;
                }
            }
            state.allChecked = allChecked;
            
        },
        //全选
        allChange(state,val){
            for(var i=0;i<state.shopCart.length;i++){
                state.shopCart[i].isChecked = val
            }
        }  

    },
    getters:{
        //总价计算
        allPri(state){
            var allNum = 0;
            for(var i=0;i<state.shopCart.length;i++){
                if(state.shopCart[i].isChecked){
                    allNum += state.shopCart[i].price * state.shopCart[i].Num
                }
            }
            return allNum
        }
    },
    actions:{

    }
})

ShopCart.vue

export default {
  name: "ShopCart",
  data() {
    return {
      isTrueDel:false,
      istrueInp:true,
      isTrueNor:false,      
      // shopCart:this.$store.state.shopCart     
    };
  },
  methods: {
    //跳转回上一页
    backDet(){
       window.history.go(-1)
    },
    calcUp(index){
      this.$store.commit("calcUp",index)
    },
    calcDown(index){
      this.$store.commit("calcDown",index)
    },
    ShopVal(index){
      this.$store.commit("ShopVal",index)
    },
    //单选
    SingleChange(){
      this.$store.commit("SingleChange")
    },
    //点击编辑显示删除
    BtnEdit(){
      this.isTrueDel = !this.isTrueDel;
      this.istrueInp = !this.istrueInp;
    },
    //删除某一项
    delBtn(index){
      this.$store.state.shopCart.splice(index, 1);
    }
  },
  computed:{
    allChange:{
      //拿到index里的allChecked
      get(){
        return this.$store.state.allChecked
      },
      //再把点击后的布尔值val传回去做计算
      set(val){
         this.$store.commit("allChange",val)
      }
    },
    //把这个方法传到index做总价的计算
    allPri:function(){
      return this.$store.getters.allPri
    }
  },
};

来源：CSDN

作者：欧阳manito

链接：https://blog.csdn.net/style201904/article/details/103202089