第4章 Vue全家桶(vue-router+vuex) - 4.25 商铺库存和购物车总价处理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步骤

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

第4章 Vue全家桶(vue-router+vuex) - 4.24 购物车中数据渲染4步骤 

首先查看项目目录：‘

​

 4.25 商铺库存和购物车总价处理6步骤

目录

 4.25 商铺库存和购物车总价处理6步骤

---

商铺库存和购物车总价处理第1步：在cart.js里面设置购物车总共价格的方法。
商铺库存和购物车总价处理第2步：在ShoppingCart.vue里面添加cartTotalPrice方法。
商铺库存和购物车总价处理第3步：在ShoppingCart.vue里面添加cartTotalPrice显示数据。
商铺库存和购物车总价处理第4步：在cart.js里面减少库存的方法。
商铺库存和购物车总价处理第5步：在products.js里面设置减少库存的方法。
商铺库存和购物车总价处理第6步：在ProductList.vue里面的按钮上添加disabled，当库存为零时，按钮为虚的状态。

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

商铺库存和购物车总价处理第1步：在cart.js里面设置购物车总共价格的方法。

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
        },
        // 获取购物车的数据
        getCartList(state,getters,rootState){  //4.24 购物车中数据渲染第4步：在cart.js里面设置添加到购物车的方法。
            return state.cartList.map(({id,quantity})=>{    //map遍历数据
                const product = rootState.products.products.find(item=>item.id===id);
                return {
                    title: product.title,
                    price: product.price,
                    quantity
                }
            })
            
        },
        cartTotalPrice(state,getters){  //4.25 商铺库存和购物车总价处理第1步：在cart.js里面设置购物车总共价格的方法。
            return getters.getCartList.reduce((total,product)=>{
                return total + product.price * product.quantity
            },0);
        }
    },
    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});
                }
                // 如果想提交另一个模块中的方法，那么需要第三个参数{root:true}
                commit('products/decrementProductInventory',{ id:product.id }, {root:true})    //4.25 商铺库存和购物车总价处理第4步：在cart.js里面减少库存的方法。
            }
        }
    }
}

商铺库存和购物车总价处理第2步：在ShoppingCart.vue里面添加cartTotalPrice方法。
商铺库存和购物车总价处理第3步：在ShoppingCart.vue里面添加cartTotalPrice显示数据。

ShoppingCart.vue代码：

// ShoppingCart.vue内容

<template>
    <div>
        <h2>我的购物车</h2>
        <ul>    <!-- //4.24 购物车中数据渲染第1步：在ShoppingCart.vue里面设置购物车显示的数据。-->
            <li v-for="(item,index) in getCartList" :key="index">
                {{item.title}} - {{item.price | currency}} x {{item.quantity}}
            </li>
        </ul>
        总价格：{{cartTotalPrice}}  <!-- //4.25 商铺库存和购物车总价处理第3步：在ShoppingCart.vue里面添加cartTotalPrice显示数据。 -->
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'   //4.24 购物车中数据渲染第2步：在ShoppingCart.vue里面导入mapGetters.
    export default {
        name:'ShoppingCart',    //组件名 注册全局组件时使用
        computed: {     //4.24 购物车中数据渲染第3步：在ShoppingCart.vue里面设置mapGetters方法。
            ...mapGetters('cart', ['getCartList','cartTotalPrice'])   //4.25 商铺库存和购物车总价处理第2步：在ShoppingCart.vue里面添加cartTotalPrice方法。
        }
    }
</script>

<style lang="scss" scoped>

</style>

商铺库存和购物车总价处理第5步：在products.js里面设置减少库存的方法。

products.js代码：

// products.js内容


import Axios from 'axios'   //4.22 模拟mock数据和商铺数据显示第8步：在products.js里面导入axios。
export default {
    namespaced:true,    //4.21 使用vuex的模块化构建购物车第9步:在products.js里面添加namespaced属性.
    state:{
        products: []    //4.21 使用vuex的模块化构建购物车第5步:在products.js里面添加products.    
    },
    getters:{

    },
    mutations:{
        getAllProducts(state,products){     //4.22 模拟mock数据和商铺数据显示第10步：在products.js里面设置mutations方法。
            state.products = products
        },
        decrementProductInventory(state,{ id }) {   //4.25 商铺库存和购物车总价处理第5步：在products.js里面设置减少库存的方法。
            const product = state.products.find(item => item.id === id);
            product.inventory--;
        }
    },
    actions:{   
        async getAllProducts({commit}){   //4.22 模拟mock数据和商铺数据显示第7步：在products.js里面设置actions方法。
            //发送请求 获取数据 提交mutations
            try {   //4.22 模拟mock数据和商铺数据显示第9步：在products.js里面通过axios获取products数据。
                const res = await Axios.get('/api/products');
                const results = res.data.results;
                commit('getAllProducts',results);
            } catch (error) {
                console.log(error);
            }
        }
    }
}

商铺库存和购物车总价处理第6步：在ProductList.vue里面的按钮上添加disabled，当库存为零时，按钮为虚的状态。

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}} - {{product.inventory}}   <!-- //4.22 模拟mock数据和商铺数据显示第12步：使用过滤器currency -->
                <br>
                <button :disabled='!product.inventory' @click="addProductsToCart(product)">加入购物车</button>   <!-- //4.23 如何添加商品到购物车中第1步：添加按钮。 -->
                <!-- //4.25 商铺库存和购物车总价处理第6步：在ProductList.vue里面的按钮上添加disabled，当库存为零时，按钮为虚的状态。 -->
            </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>

运行结果如下：

 到此Vuex讲解完成。

后面只有多看项目，多写代码，打项目的思路熟悉了，你就会写项目了。