配置全局的Store
import Vue from 'vue'
import Vuex from 'vuex'
import Axios from '../service/axios'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
shopCart:{
//produceCode 商品编码 num 数量 pPrice 价格 checked 是否选择
items:[],
totalMoney:0,
totalNum:0
}
},
mutations: {
//增加或更新商品
addToCart(state, goodsinfo) { //点击加入购物车,保存商品信息
let cart =state.shopCart ;
var flag = false; //假设没有新加入的商品
cart.items.forEach(item => {
if (item.produceCode == goodsinfo.produceCode) {
item.num = parseInt(goodsinfo.num);
flag = true;
return true;
}
});
if (!flag) { //添加到购物车
cart.items.push(goodsinfo);
}
let tempTotalNum = 0;
let tempTotalMoney = 0;
cart.items.forEach(item => {
tempTotalNum += item.num;
tempTotalMoney += (item.pPrice * 100) * item.num / 100;
});
cart.totalNum = tempTotalNum;
cart.totalMoney = tempTotalMoney;
//保存到本地存储
uni.setStorageSync('shopCart', JSON.stringify(cart));
},
delCart(state, goodsinfo) {
let cart =state.shopCart ;
cart.items.forEach((item, index) => {
if (item.produceCode == goodsinfo.produceCode) {
cart.splice(index, 1);
}
});
let tempTotalNum = 0;
let tempTotalMoney = 0;
cart.items.forEach(item => {
tempTotalNum += item.num;
tempTotalMoney += (item.pPrice * 100) * item.num / 100;
});
cart.totalNum = tempTotalNum;
cart.totalMoney = tempTotalMoney;
//保存到本地存储
uni.setStorageSync('shopCart', JSON.stringify(cart));
},
//更新选中状态
updateGoodsChecked(state, goodsinfo) {
let cart =state.shopCart ;
cart.items.some(item => {
if (item.produceCode == goodsinfo.produceCode) {
item.checked = goodsinfo.checked;
}
});
uni.setStorageSync('shopCart', JSON.stringify(cart));
},
//全选/反选切换
updateAllGoodsChecked(state, boolean) {
let cart =state.shopCart ;
cart.items.forEach(item => {
item.checked = boolean;
});
uni.setStorageSync('shopCart', JSON.stringify(cart));
}
}
})
具体页面调用Store
<script>
import {
mapState,
mapMutations
} from 'vuex'
export default {
computed: mapState(['shopCart']),
data() {
return {
productInfo: {
name: "怡宝纯净水",
produceCode: "1001",
basePrice: 100,
pMinCount: 1,
specification: "350ML*24",
saleUnit: "箱",
imgBig: "http://logistics.huaxin-group.com.cn/",
pPrice: 100,
lastMaxCount: 999999,
lastMinCount: 1
},
num: 1
}
},
onLoad: function(options) {
let tempShopCart =this.shopCart;
this.totalNum = tempShopCart.totalNum;
tempShopCart.items.forEach(item => {
if (item.produceCode == this.productInfo.produceCode) {
this.num = parseInt(item.num);
return
}
});
},
methods: {
...mapMutations(['addToCart']),
addToCart: function() {
let addInfo = this.productInfo;
addInfo.num = this.num;
addInfo.checked = false;
this.addToCart(addInfo);
}
}
}
</script>
网友评论