Web实现登陆后合并本地购物车和数据库的购物车（前端Vue逻辑和后端node接口）

分析

添加购物车

1. 商品添加到购物车
2. 加入购物车前判断是否已登录（本文主要实现下面第2点）
   • 未登录，将记录添加到Vuex的cart模块中
   • 修改本地购物车后，成功登录后，合并本地购物车并清空本地购物车
   • 已登录，请求更新数据库的购物车表

使用到的技术

1. Vuex
   - Vuex模块化，创建cart模块带命名空间，state存储购物车列表
   - Vuex模块化在模块中获取其他模块的state，使用actions的context的rootState
   - 使用异步actions，store.dispatch(‘cart/mergeLocalCart’)
   - 使用async和await获取请求的数据
2. Axios
   - POST请求，带参数
   - Promise对象
3. nodejs
   - MySQL数据库新增、查询、修改
   - 使用async和await获取请求的数据
   - 取出需要的数据使用 arr.map()
   - 查找购物车内是否已存在某一商品使用 arr.findIndex()
   - req获取POST的参数，req.body
4. 测试接口工具 Postwoman
   - 谷歌的Http接口插件

实现

前端

1. Vuex创建cart模块,主要存本地购物车列表 [ { 商品id、商品名、商品图片、商品价格、已选数量、是否选择、是否有效 } , { … } , … ]

/* Vuex的cart模块的state */
state: () => {
    return {
      //{pro_id, pro_name, pro_main_images, pro_price, count: 1//已选择件数, selected: true, isEffective: true, pro_stock}
      list: []
    }
  },

2. Vuex的getters、mutations主要处理购物车其他逻辑，比如有效商品列表、金额、件数，已选商品列表、金额、件数，是否全选，增删改查购物车列表等
3. Vuex的actions添加合并本地购物车函数mergeLocalCart。
   - 判断是否登录，查询user模块的用户id，在管理购物车表时也需要用户id来查询用户所有购物车记录。
   - 从购物车的有效商品列表中取出需要的数据 arr.map()
   - axios使用post请求（request时axios封装后的函数返回Promise对象），将用户id和本地购物车参数传过去
   - 使用mutations的修改购物车函数，将购物车清空 []，ctx.commit

	/* Vuex的cart模块的actions */
	//合并本地购物车
    async mergeLocalCart(ctx) {
      const userId = ctx.rootState.user.user.u_id;
      // console.log("Store-Cart-userid",userId)
      // 判断是否登录
      if (userId) {
        // 调用合并API接口函数进行购物合并
        const cartList = ctx.getters.validList.map(({ pro_id, pro_price, selected, count }) => {
          return { pro_id, pro_price, selected, count }
        })
        const res = await mergeCart(userId, cartList)
        // console.log("Api-Cart-合并购物车mergeLocalCart-res", res);
        // 合并成功将本地购物车删除
        ctx.commit('setCartList', [])
      } else {
        console.log("用户还未登录");
      }
    }

/* api的购物车请求*/
/**
 * axios的POST请求：合并本地购物车
 * @param {Array