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