购物车（单个删除 和 批量删除）vuex （filter indexOf， findIndex splice，） 有点懵逼 特别是 组合在一起用的时候

注意：

1 前端：

1.1 别忘了 请求接口是异步的，不要写在mutations 上，要写在 actions上 不然数据没法同步 你就很慌
1.2 注意 actions传参的写法：位置不要写错了，固定位置：({ commit,state}, id) 我写的时候没注意
1.3 splice就是通过索引查找数组数据的，通常和 findIndex 先查找索引后，再结合splice 组合使用
1.4 filter + indexOf 经常组合使用 ：过滤出符合条件的数据

2 后端：

问题：批量删除选中的购物车商品删完之后报错 # Error 1: Cannot set headers after they are sent to the client
问题参考：https://blog.csdn.net/u010682774/article/details/88100862      
不要跟着恶心的老师 用for循环 执行一个个删，这样每次循环完都会给前端返回一个信息，导致有相同的返回 就会报错
解决：根据id 批量删除sql ，其中sql条件用 where id in（前端传递过来的一堆id 用一个变量保存后放到这里比较好）

思路和实现：

1.前端

1. 单个删除 和 批量删除  都用同一个actions 的方法

    1.1 判断 单个删除 和 多个删除 的方法：通过传递的参数 和 selectList 的长度来判断：
    （我做的时候没做好判断，分成两个函数写，很麻烦很麻烦，最后改成使用同一个函数）
    if (state.selectList.length == 0 && typeof id == "object") return (Toast("请选择商品"))

2. 前端 vuex mutations 代码

// 批量删除后 要 同步更新页面数据 采用filter过滤
    delFn(state) {
        state.list = state.list.filter(v => {
            console.log(v.id);
            return state.selectList.indexOf(v.id) == -1
        });
        console.log(state.selectList, state.list);
    }

3. 前端 vuex actions 代码部分

      [DELETE_GOODS]({ commit,state}, id) {
        if (state.selectList.length == 0 && typeof id == "object") return (Toast("请选择商品"))

        let arrCard = [] // 存放前端 点击要删除的id，一个或多个 所以用数组
        Dialog.confirm({
            message: '确定要删除这些商品吗?',
        }).then(async () => {
        // 通过传递的参数类型判断 是单个 还是批量
            if (typeof id == 'number') {
                // 单个删除
                arrCard = [id];
                /* 更新单个删除后的数据,先找到要删除的id所在数组的索引，
                   然后用splice删除，splice就是通过索引查找数组数据的
                初学者容易犯的一个错误，容易把splice，直接传一个id进去，实际上用的是索引
                老师也一样犯这个错误，总以为高高在上，讲课，一旦有了一个错误，就显得有点紧张，
                然后整节课都讲的跟坨屎似的，还不会重讲一次，真恶心
                */
                let index = state.list.findIndex(v => {
                    return v.id == id;
                })
                // 删除当前这个 让页面数据 同步更新
                state.list.splice(index, 1)
                commit('checkAll') 
            } else {
                //批量删除，就是将多个id以数组的形式传递给后端
                arrCard = state.selectList;
                commit("delFn")
                commit('checkAll')
            }
            // 点击确定就发送 删除请求，点击取消 暂时不做处理了
            await http.$axios({
                method: "POST",
                url: "api/deleteItemGoods",
                data: {
                    id: arrCard
                }
            }).then(result => {
                Toast(result.msg)
            })
        })
    }
    

2 后端 接口

 // 删除购物数据 根据id
router.post('/api/deleteItemGoods', function (req, res, next) {
  // 前端传递过来的商品id
  let id = req.body.id

  connection.query(`delete from cartlist where id in (${id})`, function (e, r) {
    console.log(r, 123465);
    res.send({
      data: {
        code: 200,
        success: true,
        msg: "删除商品成功la"
      }
    })
  })
});