Vue —— 购物车各功能实现

任务5 ：购物车 各功能实现

• Api 接口

//获取 将产品添加到购物车（获取更新某一产品的个数）的接口    地址：/api/cart/addToCart/{skuId}/{skuNum}  请求方式post
export const reqAddOrUpdateShopCart = (skuId,skuNum)=>requests({
   
    url:`/cart/addToCart/${
     skuId}/${
     skuNum}`,
    method:'post'
})

//获取 购物车列表    地址：/api/cart/addToCart/{skuId}/{skuNum}  请求方式 get
export const reqCartList = ()=>requests({
   
    url:'/cart/cartList',
    method:'get'
})

//购物车中，删除商品的接口  地址：/api/cart/deleteCart/{skuId}  请求方式 delete
export const reqDeleteCartById = (skuId) => requests({
   
    url:`/cart/deleteCart/${
     skuId}`,
    method:'DELETE'
})

//修改商品的选中状态地址    地址：/api/cart/checkCart/{skuId}/{isChecked}  请求方式 get
export const reqUpdateCheckedById = (skuId,isChecked)=>requests({
   
    url:`/cart/checkCart/${
     skuId}/${
     isChecked}`,
    method:'get'
})

• Vuex三连环 store/shopCart.js

import {
    reqCartList,reqDeleteCartById,reqUpdateCheckedById } from "@/api";
const state = {
   
    cartList:[]
};
const mutations={
   
    GETCARTLIST(state,data){
   
        state.cartList = data;
    }
};
const actions={
   
    //获取购物车列表数据
    async getCartList({
    commit}){
   
        let result = await reqCartList();
        if(result.code==200){
   
            commit('GETCARTLIST',result.data)
        }
    },