---

16-登录后-合并购物车

目的：登录后需要把把本地购物车合并，且清空本地购物车。

大致步骤：

• 编写合并购物车的API接口函数
• 编写设置购物车数据的mutations目的是清空购物车
• 编写合并购物车的actions函数，实现合并后清空本地
• 在登录完成后调用合并购物车函数

落地代码：

• 编写合并购物车的API接口函数 src/api/cart.js

/**
 * 合并本地购物车
 * @param {Array<object>} cartList - 本地购物车数组
 * @param {String} item.skuId - 商品SKUID
 * @param {Boolean} item.selected - 是否选中
 * @param {Integer} item.count - 数量
 */
export const mergeLocalCart = (cartList) => {
  return request('/member/cart/merge', 'post', cartList)
}

• 编写设置购物车数据的mutations目的是清空购物车 src/store/module/cart.js

    // 设置购物车列表
    setCartList (state, list) {
      state.list = list
    }

• 编写合并购物车的actions函数，实现合并后清空本地 src/store/module/cart.js

// 购物车状态
import { mergeCart } from '@/api/cart'

    // 合并本地购物车
    async mergeLocalCart (ctx) {
      // 存储token后调用合并API接口函数进行购物合并
      const cartList = ctx.getters.validList.map(({ skuId, selected, count }) => {
        return { skuId, selected, count }
      })
      await mergeLocalCart(cartList)
      // 合并成功将本地购物车删除
      ctx.commit('setCartList', [])
    },

• 在登录完成（绑定成功，完善信息成功）后调用合并购物车函数
  login/components/login-form.vue

        // 合并购物车操作
        store.dispatch('cart/mergeLocalCart').then(() => {
          // 2. 提示
          Message({ type: 'success', text: '登录成功' })
          // 3. 跳转
          router.push(route.query.redirectUrl || '/')
        })

login/components/login-bind.vue

          // 合并购物车操作
          store.dispatch('cart/mergeLocalCart').then(() => {
            // 2. 提示
            Message({ type: 'success', text: '绑定成功' })
            // 3. 跳转
            router.push(store.state.user.redirectUrl || '/')
          })

login/components/login-path.vue

          // 合并购物车操作
          store.dispatch('cart/mergeLocalCart').then(() => {
            // 2. 提示
            Message({ type: 'success', text: '完善信息成功' })
            // 3. 跳转
            router.push(store.state.user.redirectUrl || '/')
          })

login/callback.vue

          store.dispatch('cart/mergeLocalCart').then(() => {
          // 2. 跳转到来源页或者首页
            router.push(store.state.user.redirectUrl)
            // 3. 成功提示
            Message({ type: 'success', text: 'QQ登录成功' })
          })

17-登录后-商品列表

目标：实现登陆后获取购物车商品列表。

大致步骤：

• 编写获取商品列表的API接口函数
• 在actions原有预留TODO位置获取列表
• 退出登录需要清空购物车

落地代码：

• 编写获取商品列表的API接口函数 src/api/cart.js

/**
 * 获取登录后的购物车列表
 * @returns Promise
 */
export const findCartList = () => {
  return request('/member/cart', 'get')
}

• 在actions原有预留TODO位置获取列表 src/store/module/cart.js

    // 获取购物车列表
    findCartList (ctx) {
      return new Promise((resolve, reject) => {
        if (ctx.rootState.user.profile.token) {
+          // 登录 TODO
+          findCartList().then(data => {
+            ctx.commit('setCartList', data.result)
+            resolve()
+          })
        }

• 退出登录需要清空购物车 src/components/app-navbar.vue

    // 退出登录
    // 1. 清空本地存储信息和vuex的用户信息
    // 2. 跳转登录
    const router = useRouter()
    const logout = () => {
      store.commit('user/setUser', {})
      // 清空购物车
+      store.commit('cart/setCartList', [])
      router.push('/login')
    }

18-登录后-加入购物车

目标：实现登陆后加入购物车。

大致步骤：

• 编写加入购物车的API接口函数
• 在actions原有预留TODO位置加入购物车

落地代码：

• 编写加入购物车的API接口函数 src/api/cart.js

/**
 * 加入购物车
 * @param {String} skuId - 商品SKUID
 * @param {Integer} count - 商品数量
 * @returns Promise
 */
export const insertCart = ({ skuId, count }) => {
  return request('/member/cart', 'post', { skuId, count })
}

• 在actions原有预留TODO位置加入购物车 src/store/module/cart.js

    // 加入购物车
    insertCart (ctx, goods) {
      // ctx.state 当前模块状态 ctx.rootState 根状态对象
      return new Promise((resolve, reject) => {
        if (ctx.rootState.user.profile.token) {
+          // 登录 TODO
+          insertCart(goods).then(() => {
+            return findCartList()
+          }).then((data) => {
+            ctx.commit('setCartList', data.result)
+            resolve()
+          })
        }

19-登录后-删除操作

目标：实现登陆后删除购物车商品操作（批量删除，清空无效）

大致步骤：

• 编写删除购物车商品的API接口函数
• 在actions原有预留TODO位置删除购物车商品

落地代码：

• 编写删除购物车商品的API接口函数 src/api/cart.js

/**
 * 删除商品（支持批量删除）
 * @param {Array<string>} ids - skuId集合
 * @returns Promise
 */
export const deleteCart = (ids) => {
  return request('/member/cart', 'delete', {ids})
}

• 在actions原有预留TODO位置删除购物车商品 src/store/module/cart.js

    // 删除购物车商品
    deleteCart (ctx, skuId) {
      return new Promise((resolve, reject) => {
        if (ctx.rootState.user.profile.token) {
+         // 登录 TODO
+         deleteCart([skuId]).then(() => {
+           return findCartList()
+         }).then((data) => {
+           ctx.commit('setCartList', data.result)
+           resolve()
+         })
        }