vuex封装购物车函数

比眉伴天荒 2023-06-15 12:28 16阅读 0赞

**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
        }
      },
    };