美文网首页uni-app
uni-app第二节-vuex实现购物车

uni-app第二节-vuex实现购物车

作者: 企业信息化架构 | 来源:发表于2020-01-12 22:51 被阅读0次

配置全局的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>

参考

store/index.js 加入购物车 本地存储 vuex里面操作
Vue+Vuex 实现商品购物车

相关文章

网友评论

    本文标题:uni-app第二节-vuex实现购物车

    本文链接:https://www.haomeiwen.com/subject/qkxiactx.html