美文网首页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