首先壳嚎，商品列表是v-for 動態(tài)獲取渲染席爽，使用v-model的雙向綁定$store.getters中數(shù)據(jù)，為了保持選中狀態(tài)伴栓，將數(shù)據(jù)保存到localStorage中伦连，部分具體代碼如下：
li中checkbox代碼
<input name="checkbox" value="Item 1" type="checkbox"
ref="checkbox" @change="checked(item.id,$store.getters.getGoodsChecked[item.id])"
v-model="$store.getters.getGoodsChecked[item.id]">
main.js中Vuex
var store = new Vuex.Store({
state: { //this.$store.state.xxx
cart: cart,
checkAllStatus: checkAllStatus
},
mutations: { //this.$store.commit('function',xx)
addToCart(state, goodsinfo) { //點擊加入購物車,保存商品信息
var flag = false; //假設(shè)沒有新加入的商品
state.cart.some(item => {
if (item.id == goodsinfo.id) {
item.count += parseInt(goodsinfo.count);
flag = true;
return true;
}
})
if (!flag) { //添加到購物車
state.cart.push(goodsinfo);
}
//保存到本地存儲
localStorage.setItem('cart', JSON.stringify(state.cart));
},
updateGoodsInfo(state, goodsinfo) { //修改購物車商品數(shù)量值
state.cart.some(item => {
if (item.id == goodsinfo.id) {
item.count = parseInt(goodsinfo.count);
return true;
}
})
//保存最近修改的購物車數(shù)據(jù)
localStorage.setItem('cart', JSON.stringify(state.cart));
},
deleteStoreCart(state, id) {
state.cart.some((item, index) => {
if (item.id == id) {
state.cart.splice(index, 1);
}
})
//保存到本地存儲
localStorage.setItem('cart', JSON.stringify(state.cart));
},
//更新選中狀態(tài)
updateGoodsChecked(state, info) {
state.cart.some(item => {
if (item.id == info.id) {
item.checked = info.checked;
}
})
localStorage.setItem('cart', JSON.stringify(state.cart));
},
//全選/反選切換
updateGettersGoodsChecked(state, boolean) {
state.cart.forEach(item => {
item.checked = boolean;
// console.log('----' + item.checked);
});
state.checkAllStatus.status = boolean;
// state.checkAllStatus = boolean;
localStorage.setItem('checkAllStatus', JSON.stringify(state.checkAllStatus));
localStorage.setItem('cart', JSON.stringify(state.cart));
},
},
getters: { //this.$store.getters.xxx
//獲取購物車總數(shù)量
getAllCount(state) {
var sum = 0;
state.cart.forEach(item => {
sum += item.count;
})
return sum;
},
//獲取購物車的選擇狀態(tài)
getGoodsChecked(state) {
var temp = {}
state.cart.forEach(item => {
temp[item.id] = item.checked;
})
return temp;
},
//獲取選中數(shù)量和計算商品價格
getGoodsSumAndTotal(state) {
var temp = {
sum: 0,
total: 0
}
state.cart.forEach(item => {
if (item.checked) {
temp.sum += item.count;
temp.total += (item.price * 100) * temp.sum / 100;
}
})
return temp;
}
}
})
組件 shopcart.vue 中script 部分
export default {
data() {
return {
cart: '',
value: [],
options: ['全選'],
ischecked: 0,
checkedSum: 0
//checkAllStatus: true
}
},
created() {
},
methods: {
//全選
checkAll() {
var obj = this.$store.getters.getGoodsChecked;
this.ischecked = Object.values(obj);
this.checkedSum = Object.keys(obj).length;
if (this.$refs.checkAll.checked) {
for (var i = 0; i < this.ischecked.length; i++) {
this.ischecked[i] = true;
}
this.$store.commit('updateGettersGoodsChecked', true);
} else {
for (var i = 0; i < this.ischecked.length; i++) {
this.ischecked[i] = false;
}
this.$store.commit('updateGettersGoodsChecked', false);
}
console.log('選中狀態(tài)' + this.$refs.checkAll.checked);
},
//單個選擇
checked(id, value) {
console.log(id + '------' + value);
if (!value) {
this.$store.state.checkAllStatus = false;
localStorage.setItem('checkAllStatus', JSON.stringify(false));
}
this.$store.commit('updateGoodsChecked', {
id, checked: value
});
//獲取商品所有列表的checked狀態(tài)
var obj = this.$store.getters.getGoodsChecked;
//將對象的checked值轉(zhuǎn)換存入一個新數(shù)組
this.ischecked = Object.values(obj);
var arr = [];
for (let i in this.ischecked) {
arr.push(this.ischecked[i]);
}
//every判斷數(shù)組的每一項的選中狀態(tài)
var result=arr.every(item => {
return item == true;
})
//賦值給全選按鈕
if (result) {
this.$store.state.checkAllStatus = true;
}else{
this.$store.state.checkAllStatus = false;
}
//本地存儲狀態(tài)
localStorage.setItem('checkAllStatus', JSON.stringify(result));
console.log('所有選中狀態(tài)：' + result);
console.log(arr);
},
getnum(num, maxnum) { //定義接收子組件數(shù)據(jù)的處理方法
//賦值給自己data num 數(shù)量選擇檢測
// this.num = num;
if (num > maxnum) {
this.num = maxnum;
Toast({
message: '該商品最多購買' + maxnum + '件',
position: 'middle',
duration: 3000
});
}
},
//刪除購物車數(shù)據(jù)store和cart本地數(shù)據(jù)
deleteCart(id, index) {
this.cart.splice(index, 1);
this.$store.commit('deleteStoreCart', id);
}
},
computed: {
},
components: {
cartnumbox
},
mounted() {
//頁面加載完畢獲取本地存儲的cart數(shù)據(jù)
this.$nextTick(function() {
var cart = JSON.parse(localStorage.getItem('cart') || '[]');
this.cart = cart;
// var checkAllStatus = JSON.parse(localStorage.getItem('checkAllStatus') || '[]');
// this.checkAllStatus = checkAllStatus;
//console.log(this.cart);
});
},
watch: {
}
}
自此，購物車基本功能完成钳垮，頁面刷新頁可以保持住當(dāng)前狀態(tài)
vuex-checkbox.gif
