电商平台项目 Vue day9

vscode中 ctrl+回车可在光标的下一行新增空行【小技巧】 

1、删除购物车产品

1.1、查看api接口文档的请求地址和请求方式

常用请求方式：get、 post、 put、 delete

1.2、写api 

// 删除购物车商品    /api/cart/deleteCart/{skuId}      请求：DELETE
export const reqDeleteCart = (skuId) => requests({ url: `/cart/deleteCart/${skuId}`, method: 'DELETE' })

上面这里要注意，如果有地址里有{xxx}，则在箭头函数里要把数据传进去！！！！！！！

1.3、仓库引入+三连环

import { reqCartList, reqDeleteCart, reqCheckCart } from '@/api'

export default {
    //处理actions的地方，可以书写业务逻辑、处理异步
    actions: {
        // 删除购物车中的商品
        async getDeleteCart({ commit }, skuId) {
            console.log('仓库收到请求，开始删除特点商品数据');
            let result = await reqDeleteCart(skuId);
            if (result.code == 200) {
                return 'OK'
            } else {
                console.log(result.code);
                return Promise.reject(new Error('faile'))
            }
        },
}

 1.4、组件内动态展示（要传参），发生action订单请求

// 删除商品操作，    在html中的删除部分也要写对应的点击事件deleteCartById，传参cart
    async deleteCartById(cart) {
      try {
        // dispatch给仓库发送action订单
        await this.$store.dispatch("getDeleteCart", cart.skuId);
        this.getDate();
      } catch (error) {
        alert(error.message);
      }
    },

2、商品是否全选

商品全选后下面的全选按钮是否自动勾选

这里当我们选中商品或取消商品时都需要向后台发请求修改后台数据，当所有商品勾选状态都为1时，把下面的全选按钮也勾选上

1.1、查看api文档编写api，文档里写错了不是skuID，应该是skuId，注意

// 切换商品选中状态    /api/cart/checkCart/{skuId}/{isChecked}   请求：GET
export const reqCheckCart = (skuId,isChecked)=>requests({url:`/cart/checkCart/${skuId}/${isChecked}`,method:'get'})

 1.2、导入api+三连环

import { reqCartList, reqDeleteCart, reqCheckCart } from '@/api'
export default {
    //处理actions的地方，可以书写业务逻辑、处理异步
    actions: {
        // 修改商品的选中状态
        async getCheckCart({ commit }, { skuId, isChecked }) {
            let result = await reqCheckCart(skuId, isChecked);
            if (result.code == 200) {
                return 'ok'
            } else {
                return Promise.reject(new Error('faile'))
            }
        }
    },

1.3、派发action，给单选框绑定事件

<li class="cart-list-con1">
            <input
              type="checkbox"
              name="chk_list"
              :checked="cart.isChecked == 1"
     -----》  @change="updateCheckCart(cart, $event)"
            />
          </li>

// 修改某个商品的勾选状态
    async updateCheckCart(cart, event) {
      // console.log(event);
      try {
        // 新建一个isChecked用于存储勾选的状态
        let isChecked = event.target.checked ? "1" : "0";
        // 发送订单请求，同时携带两个值，第二个值是上面刚定义的这个，如果键值对的名字相同是可以简写的
        await this.$store.dispatch("getCheckCart", {
          skuId: cart.skuId,
          isChecked: isChecked,
        });
        this.getDate();
      } catch (error) {
        alert(error.message)
      }
    },

3、全选对应功能实现

当点击下面的全选按钮时把上面的所有商品按钮勾选上，再次点击则取消上面所有商品的勾选状态

1.1、使用@change给全选按钮绑定回调

 1.2、在方法中编写对应回调，发送订单请求

// 修改所有商品的勾选状态
    updateAllCartChecked(event) {
        // 获取这个全选按钮现在是选中还是没选中？
        let isChecked = event.target.checked ? "1" : "0";
        // 派发action，把全选按钮现在的状态也带过去，在仓库里根据这个状态修改所有商品的状态
        this.$store.dispatch("getAllCartChecked", isChecked);
    },

1.3、接受订单请求，仓库开始做菜

//处理actions的地方，可以书写业务逻辑、处理异步
    actions: {
        // 修改全部商品的选中状态
        getAllCartChecked({ dispatch, state }, isChecked) {
            let promiseAll = [];
            state.cartList[0].cartInfoList.forEach((item) => {
                let promise = dispatch("getCheckCart", { skuId: item.skuId, isChecked: isChecked });
                promiseAll.push(promise);
            });
            // 最终返回结果,这里的Promise是大写的，和上面的是不一样的
            return Promise.all(promiseAll);
        },
    },

1.4、优化，try成功时批发action订单并遍历数组，失败时弹窗

// 修改所有商品的勾选状态
    async updateAllCartChecked(event) {
      try {
        // 获取这个全选按钮现在是选中还是没选中？
        let isChecked = event.target.checked ? "1" : "0";
        // 派发action，把全选按钮现在的状态也带过去，在仓库里根据这个状态修改所有商品的状态
        await this.$store.dispatch("getAllCartChecked", isChecked);
        this.getDate();
      } catch (error) {
        alert(error.message);
      }
    },

1.5、

4、删除全部选中的产品

1.1、绑定点击事件

 1.2、编写对应方法（用到了action中使用action）

因为删除选中的商品和cart所v-for出来的列表不在一个地方，所以无法通过传参获取选中商品的id

 

综上所述，我们给批量删除（ = 删除选中的商品）dispatch发请求到仓库，在仓库里action多次调用 删除的action

 

 仓库写好了，在组件里接收并this.getDate()重新获取(最新)数据，因为要等仓库更新数据，所以这边用 try-catch

手机 = 收集

 补充：

@change：类似vue的mvvm框架都是数据与视图双向绑定的，而change事件往往用于视图改变的时候去操作数据，这在mvvm框架里面显得多此一举，框架本身已映射视图的变化到数据上，所以绝大部分的change事件监听都是不必要的，对应vue，可改写为methods方法或者computed计算属性。

checked：选中的       cart info list 【购物车-信息-列表】