第4章 Vue全家桶(vue-router+vuex) - 4.23 如何添加商品到购物车中6步骤

本文要结合下面几篇文章才能串起来:

第4章 Vue全家桶(vue-router+vuex)- 4.17 vuex的其本使用8步骤

第4章 Vue全家桶(vue-route+vuex)- 4.18 vuex为什么要使用actions——异步起到同步的作用

第4章 Vue全家桶(vue-router+vuex) - 4.19 Vuex系列的辅助函数的运用——mapState,mapGetters,mapMutations,mapActions

第4章 Vue全家桶(vue-router+vuex) - 4.20 如何在组件内部提交数据给vuex共3步骤

第4章 Vue全家桶(vue-router+vuex) - 4.21 使用vuex的模块化构建购物车步骤 

第4章 Vue全家桶(vue-router+vuex) - 4.22 模拟mock数据和商铺数据显示13步骤

项目目录如下:

 如何添加商品到购物车中6步骤

目录

 如何添加商品到购物车中6步骤


如何添加商品到购物车中第1步:在ProductList.vue里面添加按钮。 
如何添加商品到购物车中第2步:在ProductList.vue里面导入mapActions.
如何添加商品到购物车中第3步:在ProductList.vue里面设置方法。
如何添加商品到购物车中第4步:在cart.js里面设置addProductToCart方法。
如何添加商品到购物车中第5步:在cart.js里面设置pushProductToCart方法。
如何添加商品到购物车中第6步:在cart.js里面设置incrementCartItemQuantity方法。

下面是操作步骤:每一步操作,在相应的代码后面都有备注。 

如何添加商品到购物车中第1步:在ProductList.vue里面添加按钮。 
如何添加商品到购物车中第2步:在ProductList.vue里面导入mapActions.
如何添加商品到购物车中第3步:在ProductList.vue里面设置方法。

ProductList.vue代码:

// ProductList.vue内容

<template>
    <div>
        <h2>我的商铺</h2>
        <ul>    <!-- //4.22 模拟mock数据和商铺数据显示第3步:在ProductList.vue里面展示。 -->
            <li v-for="(product) in products" :key="product.id">
                {{product.title}} - {{product.price | currency}}    <!-- //4.22 模拟mock数据和商铺数据显示第12步:使用过滤器currency -->
                <br>
                <button @click="addProductsToCart(product)">加入购物车</button>   <!-- //4.23 如何添加商品到购物车中第1步:添加按钮。 -->
            </li>
        </ul>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';    //4.22 模拟mock数据和商铺数据显示第4步:在ProductList.vue里面导入mapState。| //4.23 如何添加商品到购物车中第2步:添加mapActions.
    export default {
        computed: {     //4.22 模拟mock数据和商铺数据显示第5步:在ProductList.vue里面设置mapState方法。
            ...mapState('products',['products'])    //获取products模块的products数据。
        },
        created () {    //4.22 模拟mock数据和商铺数据显示第6步:在ProductList.vue里面created方法。
            this.$store.dispatch('products/getAllProducts'); //创建products模块的getAllProducts方法。
        },
        methods: {
            ...mapActions('cart',['addProductsToCart']) //4.23 如何添加商品到购物车中第3步:设置方法。
        }
    }
</script>

<style lang="scss" scoped>

</style>

如何添加商品到购物车中第4步:在cart.js里面设置addProductToCart方法。
如何添加商品到购物车中第5步:在cart.js里面设置pushProductToCart方法。
如何添加商品到购物车中第6步:在cart.js里面设置incrementCartItemQuantity方法。

cart.js代码:

// cart.js内容

export default {
    namespaced:true,    //4.21 使用vuex的模块化构建购物车第8步:在cart.js里面添加namespaced属性.
    state:{
        cartList: [],   //4.21 使用vuex的模块化构建购物车第4步:在cart.js里面添加cartList和count.
        count:0
    },
    getters:{
        getCount(state){    //4.21 使用vuex的模块化构建购物车第10步:在cart.js里面添加getters属性.
            return state.count
        }
    },
    mutations:{
        pushProductToCart(state,{ id, quantity}) {  //4.23 如何添加商品到购物车中第5步:
            state.cartList.push({
                id,
                quantity
            })
        },
        incrementCartItemQuantity(state,{id}){  //4.23 如何添加商品到购物车中第6步:
            const product = state.cartList.find(item=>item.id === id);
            product.quantity++;
        }
    },
    actions:{
        addProductToCart({commit,state},product){ //4.23 如何添加商品到购物车中第4步:
            if (product.inventory > 0) {    //有库存
                const cartItem = state.cartList.find(item=>item.id===product.id);

                if(!cartItem){
                    commit('pushProductToCart',{id:product.id,quantity:1})
                }else{
                    //购物车中已有数据
                    commit('incrementCartItemQuantity',{id:product.id});
                }
            }
        }
    }
}

此文章只涉及了两个文件的代码,其它代码在前面的几章节里面可以查看。

运行结果如下:

在下一章节中讲解:购物车中数据渲染。 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值