vuex全家桶系列07-商铺库存和购物车总价处理-上篇

1.产品展示组件-ProductList

• ProductList 组件用来展示产品列表，需要给每个产品添加 添加购物车 的按钮和点击事件
• addProduct(item) 需要将当前的 产品项item 传递进去。

<!-- 商品列表 -->
<template>
<div>
    <h2>我是商铺组件啊</h2>
    <ul>
        <li v-for="(item) in products" :key="item.title">
            {{item.title}}-{{item.price | currency }}---{{item.inventory}} <br>
            <!-- 🤪添加按钮 -->
            <button :disabled="!item.inventory" @click="addProduct(item)">添加购物车</button>
        </li>
    </ul>
</div>
</template>

<script>
import {
    mapState,
    mapActions
} from 'vuex';
export default {
    //组件名字用来注册全库组件时候使用
    name: "ProductList",
    created() {
        //发送请求,获取数据
        this.$store.dispatch("products/getAllProducts")
    },
    computed: {
        //获取请求到的products
        ...mapState('products', ['products']),
    },
    mounted() {},
    methods: {
        //映射cart模块的添加购物车的方法
        ...mapActions("cart", ["addProduct"])
    }
};
</script>

<style lang="scss" scoped>
</style>

• 接着看下store/modules/cart.js
  • addproduct 中，判断库存、之前购物车中是否添加过该商品等，然后提交commit完成对应的操作
  • cart模块 里去提交 products模块 的数据（修改products模块的内容的时候）需要添加第3个参数--{root:true}

export default {
    namespaced:true,
    state:{
        count:0,
        cartList:[    
        {
            id:1,
            title:"iphone12",
            price:1200,
            quantity:0
        }]
    },
    getters:{
        //添加购物车的计算结果
        getCartList(state,getters,rootState){
            return state.cartList.map(({id,quantity})=>{
                const product = rootState.products.products.find(item=> item.id === id);
                    return {
                        title:product.title,
                        price:product.price,
                        quantity
                    }
            })
        },
        //总价格
        cartTotalPrice(state,getters){
            return getters.getCartList.reduce((total,product)=>{
                return total + product.price * product.quantity 
            },0)
        }
    },
    mutations:{
        //更新购物车的数据
        addProductToCart(state,{id,quantity}){
            console.log("我是被添加的id",id);
            state.cartList.push({id,quantity});
        },
      //购物车中已有数据--那就找到那个商品项目对其数量+1
        incrementCartQuantity(state,{id}){
            const curItem = state.cartList.find(item=>item.id===id);
            curItem.quantity++;
        }
    },
    actions:{
        addProduct({commit,state},product){

            if(product.inventory > 0)//有库存
            {
                const cartItem  = state.cartList.find(item=>{
                    return item.id === product.id 
                });
                //购物车中没有数据，新添加到购物车
                if(!cartItem)
                {    console.log("我进来了哈");
                    commit("addProductToCart",{id:product.id,quantity:1});
                }else{
                    //购物车中已有数据
                    commit("incrementCartQuantity",{id:product.id})
                }
                //🤪这里需要减少库存的值
                //当在一个模块提交另一个模块上的东西的时候，一定要在根上也就是{root:true}
                commit("products/decrementNum",{id:product.id},{root:true})
            }
        }
    }
}

🍭下篇来记录下products.js的内容