实战干货：前端学习笔记7 - 小兔鲜购物车接口解析

加入购物车

修改加入购物车逻辑，如果用户已经登录，通过接口加入商品到购物车，并且通过接口获取最新的购物车信息并覆盖本地购物车数据。

新增购物车相关接口apis/cart.js：

import http from '@/utils/http'

/**
 * 添加商品到购物车
 * @param {String} skuId 
 * @param {Number} count 
 * @returns 
 */
export const addGood2CartService = (skuId, count) => {
    return http.post('/member/cart', { skuId, count })
}

/**
 * 从购物车获取商品列表
 * @returns 
 */
export const getGoodsFromCartService = () => {
    return http.get('/member/cart')
}

修改存储库stores/user.js，增加一个表示是否登录的计算属性：

const isLogin = computed(() => {
    if(userInfo.value.token){
        return true
    }
    return false
})

修改存储库stores/cart.js：

// ...
import { addGood2CartService, getGoodsFromCartService } from '@/apis/cart'
// 添加商品
const addGood = async (good) => {
    // 用户是否登录，如果已经登录，通过接口添加购物车，并获取购物车信息覆盖本地数据
    const userStore = useUserStore()
    if (userStore.isLogin) {
        // 用户已经登录
        // 通过接口添加购物车
        await addGood2CartService(good.skuId, good.count)
        // 从接口获取购物车信息
        const res = await getGoodsFromCartService()
        // 覆盖本地购物车
        goods.value = res.result
    }
    else {
        const matched = goods.value.find((item) => item.skuId === good.skuId)
        if (matched) {
            // 购物车中已经存在相同的 sku
            matched.count += good.count
        }
        else {
            // 购物车中没有
            goods.value.push(good)
        }
    }
}

删除购物车

封装接口：

/**
 * 从购物车删除商品
 * @param {Array} skuIds skuId 的集合
 * @returns 
 */
export const delGoodsFromCartService = (skuIds) => {
    return http.delete('/member/cart', {
        data: {
            ids: skuIds
        }
    })
}

修改购物车存储库的删除 Action：

const delGood = async (skuId) => {
    const userStore = useUserStore()
    if (userStore.isLogin) {
        // 用户登录时，通过接口删除商品
        await delGoodsFromCartService([skuId])
        // 通过接口获取最新购物车数据
        const res = await getGoodsFromCartService()
        // 覆盖本地购物车数据
        goods.value = res.result
    }
    const index = goods.value.findIndex(item => item.skuId === skuId)
    console.log(index)
    if (index >= 0) {
        goods.value.splice(index, 1)
    }
}

有多个地方都会从服务端更新购物车信息到本地，这部分逻辑可以封装复用：

// 从服务端读取购物车数据并更新到本地
const loadGoodsFromServer = async ()=>{
    // 从接口获取购物车信息
    const res = await getGoodsFromCartService()
    // 覆盖本地购物车
    goods.value = res.result
}

清空购物车

需要在退出登录时清除购物车信息。

为购物车存储库增加清除信息 Action：

// 清除购物车中的商品信息
const clear = () => {
    goods.value = []
}

修改用户存储库，在退出时清除购物车信息：

const clearUserInfo = () => {
    userInfo.value = {}
    // 清除本地购物车
    const cartStore = useCartStore()
    cartStore.clear()
}

合并购物车

封装接口：

/**
 * 合并购物车
 * @param {[skuId:String, selected:string, count:Number]} goods 
 * @returns 
 */
export const mergeCartService = (goods) => {
    return http.post('/member/cart/merge', goods)
}

修改购物车存储库，增加合并 Action：

// 合并购物车
const merge = () => {
    // 合并购物车
    const items = goods.value.map(g => {
        return { skuId: g.skuId, selected: g.selected, count: g.count }
    })
    mergeCartService(items)
    // 更新本地购物车
    loadGoodsFromServer()
}

修改用户存储库，在登录后合并购物车：

const loadUserInfo = async (account, password) => {
    const res = await loginService({ account, password })
    userInfo.value = res.result
    // 合并购物车
    cartStore.merge()
}