AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue尚品汇商城项目-day04【29.加入购物车操作（难点）】

2024-10-07 42
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vue尚品汇商城项目-day04【29.加入购物车操作（难点）】

1.jpeg

29.加入购物车操作（难点）

重难点说明

1) 用户临时ID的处理

2) 购物车数据的管理(复杂)

3) 不使用v-model监控用户输入

4) async / await / Promise.all() 的使用

思路：

  1. 加入购物车按钮

    • 路由跳转之前发请求

    • 成功路由跳转与参数传递

    • 失败提示失败信息

  2. addCartSuce

    • 查看详情
    • 查看购物车

  3. 购物车

    • 购物车静态组件-需要修改样式结构（删除第三项并调整css让各个项目对齐，比例为：15 35 10 17 10 13）
    • 向服务器发送ajax请求，获取购物车数据
    • UUID临时游客身份
    • 动态展示购物车

  4. 修改购物车产品的数量（需要发请求：参数理解）

  5. 删除某一产品

  6. 修改产品状态

  7. 删除全部选中的商品

  8. 全选操作

29.1加入购物车按钮

加入购物车按钮

  • 路由跳转之前发请求

  • 成功路由跳转与参数传递

  • 失败提示失败信息

修改代码：

src/pages/Detail/index.vue

<a href="javascript:" @click="addOrUpdateShopCar">加入购物车</a>

methods: {
 //加入购物车
      async addOrUpdateShopCar() {
       //1:在点击加入购物车这个按钮的时候，做的第一件事情，将参数带给服务器（发请求），通知服务器加入购车的产品是谁
       //this.$store.dispatch('addOrUpdateShopCart'),说白了，它是在调用vuex仓库中的这个addOrUpdateShopCart函数。
       //2:你需要知道这次请求成功还是失败，如果成功进行路由跳转，如果失败，需要给用户提示
        try {
          //成功
          await this.$store.dispatch("addOrUpdateShopCar", {skuId: this.$route.params.skuId, skuNum: this.skuNum});
          //3:进行路由跳转
          //4:在路由跳转的时候还需要将产品的信息带给下一级的路由组件
          //一些简单的数据skuNum，通过query形式给路由组件传递过去
          //产品信息的数据【比较复杂:skuInfo】,通过会话存储（不持久化,会话结束数据在消失）
          //本地存储|会话存储，一般存储的是字符串
          sessionStorage.setItem("SKUINFO", JSON.stringify(this.skuInfo))
          this.$router.push({name: "addCartSuccess", query:{skuNum: this.skuNum}})
        } catch (error) {
            //失败
          alert(error.message);
        }
      }
}

src/api/index.js

//将产品添加到购物车中（获取更新某一个产品的个数）
// /api/cart/addToCart/{ skuId }/{ skuNum }  POST
export const addOrUpdateShopCar = (skuId, skuNum)=>requests({url:`/cart/addToCart/${skuId}/${skuNum}`, method:"post"});

src/store/detail/index.js

import {getGoodsInfo, addOrUpdateShopCar} from "@/api";

const actions = {
    //加入购物车的||修改某一个产品的个数，注意一定要用解构方法解构形参对象，不能写成接收两个形参形式，那样会报错接口调不通
    async addOrUpdateShopCar(context, {skuId, skuNum}) {
        //发请求:前端带一些参数给服务器【需要存储这些数据】，存储成功了，没有给返回数据
        //不需要在三连环（仓库存储数据了）
        //注意:async函数执行返回的结果一定是一个promise【要么成功，要么失败】
        let response = await addOrUpdateShopCar(skuId, skuNum);
        if (response.code == 200) {
            //返回的是成功的标记
            return "OK";
        } else {
            //返回的是失败的标记
            return Promise.reject(new Error("fail"))
        }
    },
}

注意点1：

问题：加入购物车路由跳转跟普通的路由跳转不一样，不一样在哪里？

答案：因为加入购物车功能得先调接口保存加入购物车的数据，然后再跳转路由。而普通的路由跳转直接跳转并传参就行。

注意点2：

问题：点击购物车函数派发定义在详情组件中，但是加入购物车接口调用在仓库中，如何获取调用函数的结果呢？

答案：第一种方案在vuex的state中保存结果，第二种方案在详情组件中采用async+await修饰派发方法获取调用成功失败结果。

注意点3：

问题：如下代码vuex中执行ajax调用接口返回失败，为啥？

src/api/index.js

//将产品添加到购物车中（获取更新某一个产品的个数）
// /api/cart/addToCart/{ skuId }/{ skuNum }  POST
export const addOrUpdateShopCar = (skuId, skuNum)=>requests({url:`/cart/addToCart/${skuId}/${skuNum}`, method:"post"});

src/store/detail/index.js

 async addOrUpdateShopCar(context, skuId, skuNum) {
        let response = await addOrUpdateShopCar(skuId, skuNum);
        console.log("******response:", response)       
    }

报错如下：

image.png

答案：vuex中action定义的函数接收形参书写个数不对。

如果是一个参数可以写成：addOrUpdateShopCar(context, skuId)
但如果是传入多个参数则不能这样写：这是错误写法：addOrUpdateShopCar(context, skuId, skuNum)
正确写法是派发时传入一个对象通过解构方式获取属性值，正确写法：addOrUpdateShopCar(context, {skuId, skuNum})

注意点4:

问题：理解异步函数async和await的用法？

答案：

  1. async 函数
    1)函数的返回值为Promise对象
    2)Promise对象的结果由async函数执行的返回值决定
  2. await 表达式
    1)await右侧的表达式一般为promise对象, 但也可以是其它的值
    2)如果表达式是promise对象，await就忙起来了，它会阻塞函数后面的代码，等着Promise对象resolve，然后得到resolve的值，作为await表达式的运算结果。
    3)如果表达式是其它值, 直接将此值作为await的返回值
  3. async和await基于promise的。使用async的函数将会始终返回一个 promise 对象。这一点很重要，要记住，可能是你遇到容易犯错的地方。
  4. 在使用await的时候我们只是暂停了函数，而非整段代码。
  5. async和await是非阻塞的
  6. 仍然可以使用 Promise，例如Promise.all().
  7. 注意
    1)await必须写在async函数中, 但async函数中可以没有await
    2)如果await的promise失败了, 就会抛出异常, 需要通过try…catch来捕获处理

29.2addCartSuce

重难点说明：区别使用sessionStorage与localStorage

addCartSuce

  • 查看详情
  • 查看购物车

效果如图

image.png

修改代码：

拷贝src/pages/AddCartSuccess文件夹

src/router/routes.js

import AddCartSuccess from '@/pages/AddCartSuccess'
import ShopCart from '@/pages/ShopCart'
{
        name: 'addCartSuccess',
        path: '/addCartSuccess',
        component: AddCartSuccess,
        meta:{"isShow": true}   //自定义元数据属性，判断Footer组件在底部是否显示
},
{
        name: 'shopCart',
        path: '/shopCart',
        component: ShopCart,
        meta:{"isShow": true}   //自定义元数据属性，判断Footer组件在底部是否显示
},

src/pages/AddCartSuccess/index.vue

<img :src="skuInfo.skuDefaultImg">
<p class="title">{
  {skuInfo.skuName}}</p>
<p class="attr">{
  {skuInfo.skuDesc}} 数量：{
  {$route.query.skuNum}}</p>
<router-link class="sui-btn btn-xlarge" :to="`/detail/${skuInfo.id}`">查看商品详情</router-link>
<router-link to="/shopCart">去购物车结算</router-link>

computed: {
      skuInfo() {
        return JSON.parse(sessionStorage.getItem("SKUINFO"))
      }
}

注意点1：

问题：点击加入购物车按钮后跳转路由需要传参购物详情参数，采用哪种方式？query？params？

答案：其实都可以，但是最优雅的还是采用query方式，具体效果看如下：

  • 首先是采用params方式，地址栏显示的是地址字符串，但组件中控制台打印居然也能正确解析，说明能获取到参数，但是URL看起来一大长串东西还是不优雅，万一后续URL一顿追加参数，岂不是越来越长根本不优雅。

image.png

  • 而采用query方式，地址栏很清爽，所以推荐采用这种方式传参。

image.png

注意点2：

问题：参数传递采用本地存储好还是会话存储好？

答案：推荐采用会话存储，localStorage本地存储会在硬盘保留一份需手动清除，而sessionStorage会话存储随着浏览器窗口关闭就清楚了，使用方便。

注意点3：

问题：无论是本地存储还是会话存储，可以存对象吗？

答案：不能，只能存json字符串，直接存对象会无法解析。

  • 存储存对象效果，这东西无法解析：

image.png

29.3购物车

购物车

  • 购物车静态组件-需要修改样式结构（删除第三项并调整css让各个项目对齐，比例为：15 35 10 17 10 13）
  • 向服务器发送ajax请求，获取购物车数据
  • UUID临时游客身份
  • 动态展示购物车

29.3.1 向服务器发送ajax请求，获取购物车数据

修改代码：

src/api/index.js

//获取购物车列表数据接口
//URL:/api/cart/cartList   method:get
export const reqCartList = ()=>requests({url:'/cart/cartList ',method:'get'});

src/store/index.js

import shopCar from "@/store/shopCar"

 modules:{
        ...
        shopCar
    }

src/store/shopCar/index.js

import {reqCartList} from "@/api";

//shopCar模块的小仓库
//actions代表一系列动作，可以书写自己的业务逻辑，也可以处理异步
const actions = {
    async reqCartList({commit}) {
        let response = await reqCartList();
        if (response.code == 200) {
            commit("REQ_CART_LIST", response.data)
        }
    },

}
//mutations代表维护，操作维护的是state中的数据，且state中数据只能在mutations中处理
const mutations = {
    REQ_CART_LIST(state, carList) {
        state.carList = carList
    },
}
//state代表仓库中的数据
const state = {
    //购物车列表
    carList: [],
}
//计算属性
//项目当中getters主要的作用是:简化仓库中的数据(简化数据而生)
//可以把我们将来在组件当中需要用的数据简化一下【将来组件在获取数据的时候就方便了】
const getters = {
    carList(state) {
        return state.carList[0] || {};
    }
}

//创建并暴露store
export default {
    actions,
    mutations,
    state,
    getters
}

src/pages/ShopCart/index.vue

methods: {
      getData() {
        this.$store.dispatch('reqCartList')
      },
    },
mounted() {
      this.getData()
}

注意点1：如图，这一列多余，删除第三项并调整css让各个项目对齐，比例为：15 35 10 17 10 13

image.png

注意点2：

问题：向服务器发送查询购物车ajax请求，获取购物车数据，为啥返回数据是空呢？

答案：因为你得带UUID的东西，后端不知道你谁，也就不知道把那条数据返回给你了。

29.3.2UUID临时游客身份

安装命令：cnpm install --save uuid

修改代码：

src/utils/uuid_token.js

import { v4 as uuidv4 } from 'uuid';
//要生成一个随机字符串，且每次执行不能发生变化，游客身份持久存储
export const getUUID = ()=>{
    //先从本地存储获取uuid（看一下本地存储里面是否有）
    let uuid_token = localStorage.getItem('UUIDTOKEN');
    //如果没有
    if(!uuid_token){
        //我生成游客临时身份
        uuid_token = uuidv4();
        //本地存储存储一次
        localStorage.setItem('UUIDTOKEN',uuid_token);
    }
    //切记有返回值,没有返回值undefined
    return uuid_token;
}

src/api/axios.js

//在当前模块中引入store
import store from '@/store';
if(store.state.detail.uuid_token){
        //请求头添加一个字段(userTempId):和后台老师商量好了
        config.headers.userTempId = store.state.detail.uuid_token;
}

src/store/detail/index.js

const state = {
    //游客临时身份
    uuid_token: getUUID()
}

注意点1：

问题：假设现在我有UUID了，那如何传过去呢？接口已经定义好了只有2个参数，UUID咋传过去？

答案：可以放在请求头header中传递过去。

注意点2：

问题：我如何使用UUID第三方插件呢？

答案：登录npm官网https://www.npmjs.com/package/uuid搜索uuid，下方就是使用方式。

image.png

注意点3：切记UUID不能在vuex中生成，因为vuex是每次触发就会随机生成，会变动这是不行的，正常应该是一次生成有效期内不改变。所以这个uuidv4()不能放在vuex中，最好放在src目录下新建一个文件夹utils，这个文件夹里面经常放一些常用的功能模块，比如正则、临时身份UUID等等。

注意点4：切记src/utils/uuid_token.js下封装的uuid方法一定要有返回值，否则返回值是underfine无效的。

注意点5：

问题：在src/api/axios.js中现在需要给请求头header添加uuid，但是uuid在vuex仓库中，如何获取呢？

答案：在src/api/axios.js中引入import store from '@/store';，通过store 对象可以获取仓库中的state属性。

29.3.3动态展示购物车

修改代码：

src/pages/ShopCart/index.vue

<ul class="cart-list" v-for="(car, index) in cartInfoList" :key="car.id">
<input type="checkbox" name="chk_list" :checked="car.isChecked == 1">
<div class="item-msg">{
  {car.skuName}}</div>
<span class="price">{
  {car.skuPrice}}.00</span>
<input autocomplete="off" type="text" :value="car.skuNum" minnum="1" class="itxt">
<span class="sum">{
  {car.skuNum * car.skuPrice}}</span>
<i class="summoney">{
  {carTotalPrice}}</i>

import {mapGetters} from "vuex";
data() {
      return {
        totalPrice: 0
      }
    },
    computed: {
      ...mapGetters(["carList"]),
      //购物车数据
      cartInfoList() {
        return this.carList.cartInfoList || []
      },
      //计算购买产品的总价
      carTotalPrice() {
        this.cartInfoList.forEach(item => {
          this.totalPrice += item.skuNum * item.skuPrice;
        })
        return this.totalPrice;
      },
      //判断底部复选框是否勾选【全部产品都选中，采勾选】
      isAllChecked() {
        //遍历数组里面原理，只要全部元素isChecked属性都为1===>真 true
        //只要有一个不是1======>假false
        return this.cartInfoList.every(item=> item.isChecked == 1)
      }
    }

注意点1：

问题：查询购物车信息的接口方法放在哪里？是放在“去购物车结算”按钮还是放在“购物车”页面加载完毕中定义？

答案：放在“购物车”页面加载完毕中定义，只要购物车页面一初始化，甭管哪个入口跳转进来的都能进行批量查询购物车数据并动态展示。

注意点2：购物车左下角的全选按钮判断是否勾选，推荐适用every而不是foreach方法

isAllChecked() {
        //遍历数组里面原理，只要全部元素isChecked属性都为1===>真 true
        //只要有一个不是1======>假false
        return this.cartInfoList.every(item=> item.isChecked == 1)
}

29.4修改购物车产品的数量（需要发请求：参数理解）

修改代码：

src/pages/ShopCart/index.vue

<li class="cart-list-con5">
            <a href="javascript:void(0)" class="mins" @click="handle('minus', -1, car)">-</a>
            <input autocomplete="off" type="text" :value="car.skuNum" minnum="1" class="itxt" @change="handle('change', $event.target.value * 1, car)">
            <a href="javascript:void(0)" class="plus" @click="handle('add', 1, car)">+</a>
</li>

//引入lodash:是把lodash全部封装好的函数全都引入进来了
//按需引入：只是引入节流函数，其他的函数没有引入（模块），这样做的好处是，当你打包项目的时候体积会小一些
import throttle from "lodash/throttle";
methods: {
    //修改某一个产品的个数[节流]
      handle: throttle(async function(flag, disNum, car) {
        //type:为了区分这三个元素
        //disNum形参:+ 变化量（1）  -变化量（-1）   input最终的个数（并不是变化量）
        //cart:哪一个产品【身上有id】
        //向服务器发请求，修改数量
        switch (flag) {
          case "add":
            //加号
            disNum = 1;
            break;
          case "minus":
            //判断产品的个数大于1，才可以传递给服务器-1
            //如果出现产品的个数小于等于1，传递给服务器个数0（原封不动）
            disNum = car.skuNum > 1 ? -1 : 0;
            break;
          case "change":
            /*用户输入进来的最终量，如果非法的（带有汉字|出现负数），带给服务器数字零
            * 问题：为啥是disNum < 1，而不是disNum <= 1
            * 答案：哪怕输入1也会走else里面的代码，不影响功能，所以无需加“=”等于号
            */
            if (isNaN(disNum) || disNum < 1) {
              disNum = 0;
            } else {
              //属于正常情况（小数：取证），带给服务器变化的量 用户输入进来的 - 产品的起始个数
              disNum = parseInt(disNum) - car.skuNum;
            }
            break;
        }
        try {
          //派发action
          await this.$store.dispatch('addOrUpdateShopCar', {skuId: car.skuId, skuNum: disNum})
          //再一次获取服务器最新的数据进行展示
          this.getData();
        } catch (error) {
          //失败
          alert(error.message);
        }
      }, 500),
}

注意点1：如图，购物车中的【+、-、输入值】都应该触发修改购物车接口，且三个函数是同一个函数

image.png

注意点2：

问题：如何区分是点击了加号、减号、还是输入值呢？

答案：通过传参字符串flag标识名称进行区分。

注意点3：

问题：实际触发修改购物车接口的传值要注意。

答案：点击“+”号应传值（1），点击“-”号应传值（-1），点击输入值应传值（输入值-原始值）。

注意点4：输入框中事件一定要写成@change，而不是@click，否则效果不对。

注意点5：

问题：对于“minus”情况，为啥是disNum < 1，而不是disNum <= 1

答案：哪怕输入1也会走else里面的代码，不影响功能，所以无需加“=”等于号

注意点6：点击减号“-”要加判断，不能让值小于1。

case "minus":
            //判断产品的个数大于1，才可以传递给服务器-1
            //如果出现产品的个数小于等于1，传递给服务器个数0（原封不动）
            disNum = car.skuNum > 1 ? -1 : 0;
            break;

注意点7：对于“change”情况，也要加判断

case "change":
            /*用户输入进来的最终量，如果非法的（带有汉字|出现负数），带给服务器数字零
            * 问题：为啥是disNum < 1，而不是disNum <= 1
            * 答案：哪怕输入1也会走else里面的代码，不影响功能，所以无需加“=”等于号
            */  
            if (isNaN(disNum) || disNum < 1) {
              disNum = 0;
            } else {
              //属于正常情况（小数：取证），带给服务器变化的量 用户输入进来的 - 产品的起始个数
              disNum = parseInt(disNum) - car.skuNum;
            }
            break;

注意点8：

问题：连续点击，居然能出现负数，而慢慢点击就不会出问题，为什么？

在这里插入图片描述

答案：因为没有加“节流”效果，由于点击过快就会出现这种错误现象。

旧代码：

//修改某一个产品的个数[节流]
      async handle(flag, disNum, car) {
        //type:为了区分这三个元素
        //disNum形参:+ 变化量（1）  -变化量（-1）   input最终的个数（并不是变化量）
        //cart:哪一个产品【身上有id】
        //向服务器发请求，修改数量
        switch (flag) {
          case "add":
            //加号
            disNum = 1;
            break;
          case "minus":
            //判断产品的个数大于1，才可以传递给服务器-1
            //如果出现产品的个数小于等于1，传递给服务器个数0（原封不动）
            disNum = car.skuNum > 1 ? -1 : 0;
            break;
          case "change":
            /*用户输入进来的最终量，如果非法的（带有汉字|出现负数），带给服务器数字零
            * 问题：为啥是disNum < 1，而不是disNum <= 1
            * 答案：哪怕输入1也会走else里面的代码，不影响功能，所以无需加“=”等于号
            */
            if (isNaN(disNum) || disNum < 1) {
              disNum = 0;
            } else {
              //属于正常情况（小数：取证），带给服务器变化的量 用户输入进来的 - 产品的起始个数
              disNum = parseInt(disNum) - car.skuNum;
            }
            break;
        }
        try {
          //派发action
          await this.$store.dispatch('addOrUpdateShopCar', {skuId: car.skuId, skuNum: disNum})
          //再一次获取服务器最新的数据进行展示
          this.getData();
        } catch (error) {
          //失败
          alert(error.message);
        }
      },

修改后代码

//引入lodash:是把lodash全部封装好的函数全都引入进来了
//按需引入：只是引入节流函数，其他的函数没有引入（模块），这样做的好处是，当你打包项目的时候体积会小一些
import throttle from "lodash/throttle";

//修改某一个产品的个数[节流]
      handle: throttle(async function(flag, disNum, car) {
        //type:为了区分这三个元素
        //disNum形参:+ 变化量（1）  -变化量（-1）   input最终的个数（并不是变化量）
        //cart:哪一个产品【身上有id】
        //向服务器发请求，修改数量
        switch (flag) {
          case "add":
            //加号
            disNum = 1;
            break;
          case "minus":
            //判断产品的个数大于1，才可以传递给服务器-1
            //如果出现产品的个数小于等于1，传递给服务器个数0（原封不动）
            disNum = car.skuNum > 1 ? -1 : 0;
            break;
          case "change":
            /*用户输入进来的最终量，如果非法的（带有汉字|出现负数），带给服务器数字零
            * 问题：为啥是disNum < 1，而不是disNum <= 1
            * 答案：哪怕输入1也会走else里面的代码，不影响功能，所以无需加“=”等于号
            */
            if (isNaN(disNum) || disNum < 1) {
              disNum = 0;
            } else {
              //属于正常情况（小数：取证），带给服务器变化的量 用户输入进来的 - 产品的起始个数
              disNum = parseInt(disNum) - car.skuNum;
            }
            break;
        }
        try {
          //派发action
          await this.$store.dispatch('addOrUpdateShopCar', {skuId: car.skuId, skuNum: disNum})
          //再一次获取服务器最新的数据进行展示
          this.getData();
        } catch (error) {
          //失败
          alert(error.message);
        }
      }, 500),

29.5删除某一产品

修改代码：

app/src/api/index.js

//删除购物产品的接口
//URL:/api/cart/deleteCart/{skuId}   method:DELETE
export const reqDeleteCartById = (skuId)=>requests({url:`/cart/deleteCart/${skuId}`,method:'delete'});

src/store/shopCar/index.js

import {reqDeleteCartById} from "@/api";

const actions = {
    //删除购物车某一个产品
    async reqDeleteCartById({commit}, skuId) {
        let response = await reqDeleteCartById(skuId);
        if (response.code == 200) {
            //返回的是成功的标记
            return "OK";
        } else {
            //返回的是失败的标记
            return Promise.reject(new Error("fail"))
        }
    }
}

src/pages/ShopCart/index.vue

<a class="sindelet" @click="reqDeleteCartById(car.skuId)">删除</a>

//删除某一个产品的操作
async reqDeleteCartById(skuId) {
        try {
          //派发action
          await this.$store.dispatch('reqDeleteCartById', skuId)
          this.getData();
        } catch (error) {
          alert(error.message)
        }
}

29.6修改产品状态

修改代码：

app/src/api/index.js

//修改商品的选中状态
//URL:/api/cart/checkCart/{skuId}/{isChecked}   method:get
export const reqUpdateCheckedByid = (skuId,isChecked)=>requests({url:`/cart/checkCart/${skuId}/${isChecked}`,method:'get'});

src/store/shopCar/index.js

import {reqUpdateCheckedByid} from "@/api";

const actions = {
    //修改购物车某一个产品的选中状态
    async reqUpdateCheckedByid({commit}, {skuId,isChecked}) {
        let response = await reqUpdateCheckedByid(skuId,isChecked);
        if (response.code == 200) {
            //返回的是成功的标记
            return "OK";
        } else {
            //返回的是失败的标记
            return Promise.reject(new Error("fail"))
        }
    },
}

src/pages/ShopCart/index.vue

<input type="checkbox" name="chk_list" :checked="car.isChecked == 1" @change="reqUpdateCheckedByid(car.skuId, $event)">

//修改某个产品的勾选状态
      async reqUpdateCheckedByid(skuId, event) {
        try {
          //如果修改数据成功，再次获取服务器数据（购物车）
          let isChecked = event.target.checked ? "1" : "0";
          //派发action
          await this.$store.dispatch('reqUpdateCheckedByid', {skuId: skuId, isChecked})
          this.getData();
        } catch (error) {
          alert(error.message)
        }
      },

29.7删除全部选中的商品

修改代码：

src/pages/ShopCart/index.vue

<a @click="deleteAllCheckedCar">删除选中的商品</a>

//删除全部选中的产品
//这个回调函数咱门没办法手机到一些有用数据
async deleteAllCheckedCar() {
        try {
          //成功
          //派发一个action
          await this.$store.dispatch('deleteAllCheckedCar')
          //再发请求获取购物车列表
          this.getData()
        } catch (error) {
            //失败
            alert(error.message)
        }
}

src/store/shopCar/index.js

//删除全部勾选的产品
async deleteAllCheckedCar({dispatch, getters}) {
        //context:小仓库，commit【提交mutations修改state】 getters【计算属性】 dispatch【派发action】 state【当前仓库数据】
        //获取购物车中全部的产品（是一个数组）
        let primoseAll = [];
        getters.carList.cartInfoList.forEach(item => {
            let promise = item.isChecked == 1 ? dispatch('reqDeleteCartById', item.skuId) : '';
            //将每一次返回的Promise添加到数组当中
            primoseAll.push(promise);
        })
        //只要全部的p1|p2....都成功，返回结果即为成功
        //如果有一个失败，返回即为失败结果
        return Promise.all(primoseAll);
    }

注意点1：接口API未提供选中删除的功能，只提供了单独删除的，所以可以采用批量循环删除的方式。

注意点2：dispatch派发不仅可以存在于vue中使用，也可以在vuex仓库中使用

注意点3：vuex仓库中的context包含很多东西，包括【commit、dispatch、getters、state...】，具体如图

image.png

注意点4：Promise.all用法，all里面的是个数组，如果其中的子项promise有一个失败，返回即为失败结果。具体用法如下：

let primoseAll = [];
let promise = item.isChecked == 1 ? dispatch('reqDeleteCartById', item.skuId) : '';
//将每一次返回的Promise添加到数组当中
primoseAll.push(promise);
//只要全部的p1|p2....都成功，返回结果即为成功
//如果有一个失败，返回即为失败结果
return Promise.all(primoseAll);

29.8全选操作

修改代码：

src/pages/ShopCart/index.vue

<input class="chooseAll" type="checkbox" :checked="isAllChecked && cartInfoList.length > 0" @click="updateAllCheckedCar($event.target.checked)">

//修改全部产品的选中状态
async updateAllCheckedCar(checked) {
        try {
          //成功
          //派发一个action
          let isChecked = checked ? "1" : "0";
          await this.$store.dispatch('updateAllCheckedCar', isChecked)
          //再发请求获取购物车列表
          this.getData()
        } catch (error) {
          //失败
          alert(error.message)
        }
},

src/store/shopCar/index.js

//修改全部产品的状态
async updateAllCheckedCar({dispatch, getters}, isChecked) {
        //context:小仓库，commit【提交mutations修改state】 getters【计算属性】 dispatch【派发action】 state【当前仓库数据】
        //获取购物车中全部的产品（是一个数组）
        let primoseAll = [];
        getters.carList.cartInfoList.forEach(item => {
            let promise = dispatch('reqUpdateCheckedByid', {skuId:item.skuId, isChecked});
            //将每一次返回的Promise添加到数组当中
            primoseAll.push(promise);
        })
        //只要全部的p1|p2....都成功，返回结果即为成功
        //如果有一个失败，返回即为失败结果
        return Promise.all(primoseAll);
    }

注意点1：全选或全不选后的正确效果如图

在这里插入图片描述

注意点2：

问题：全部删除后，左下角的勾选按钮居然还是选中状态，需要优化

答案：在后面多补充个cartInfoList.length > 0判断条件即可

:checked="isAllChecked && cartInfoList.length > 0

本人其他相关文章链接

1.vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示（开发Search组件）】
2.vue尚品汇商城项目-day04【25.面包屑处理关键字】
3.vue尚品汇商城项目-day04【26.排序操作（难点）】
4.vue尚品汇商城项目-day04【27.分页器静态组件（难点）】
5.vue尚品汇商城项目-day04【28.详情页面Detail】
6.vue尚品汇商城项目-day04【29.加入购物车操作（难点）】

文章标签：
前端开发
API
JavaScript
存储
JSON
关键词：
购物车VUE.js
vue购物车VUE.js
vue项目VUE.js
项目VUE.js
vue尚品汇商城项目VUE.js
刘大猫.
目录
相关文章
程序员彭于晏
|
27天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
28 1
阿里巴巴叫我来巡山
|
3天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统，提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性，实现用户友好的界面，方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构，确保稳定性和多功能模块设计，涵盖管理员和用户功能模块，促进物品循环使用，降低开销，提升环保意识，助力绿色校园文化建设。
阿里巴巴叫我来巡山
40 17
程序员彭于晏
|
27天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
36 0
程序员彭于晏
|
27天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
程序员彭于晏
37 0
大树营养快线
|
29天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之，Vue 数据驱动视图是一种先进的理念和技术，它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性，开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中，数据驱动视图将继续发挥重要作用，推动着应用界面的不断创新和进化。
大树营养快线
31 2
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
36 1
vue学习第一章
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令，包括基本使用、动态绑定class及style等，希望能为你的前端学习之路提供帮助。持续关注，更多精彩内容即将呈现！🎉🎉🎉
雨溪-yuxi
26 1
vue学习第三章
雨溪-yuxi
|
1月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用，请关注我，将持续更新更多优质内容！🎉🎉🎉
雨溪-yuxi
35 1
vue学习第四章
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 算法
vue学习第7章(循环）
欢迎来到瑞雨溪的博客，一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令，包括遍历数组和对象、使用key以及数组的响应式方法等内容，并附有综合练习实例。关注我，将持续更新更多优质文章！🎉🎉🎉
雨溪-yuxi
24 1
vue学习第7章(循环）
雨溪-yuxi
|
1月前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript与Vue的大一学生，自学前端2年半，正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
29 1
vue学习第九章(v-model)

热门文章

最新文章

  • 1
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 2
    Nestjs+Vue实现阿里云OSS服务端签名直传
  • 3
    全栈开发实战｜​人事管理系统的设计与实现（Spring Boot + Vue 3 + MyBatis）
  • 4
    浏览器垃圾回收机制与 Vue 项目内存泄漏分析
  • 5
    vue之webpack打包原理和用法详解
  • 6
    基于Serverless函数计算FC一键搭建VUE3.0脚手架
  • 7
    VUE3中watch与watchEffect —— 全网最详细系列
  • 8
    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
  • 9
    中文代码示例之Vuejs入门教程(一)
  • 10
    【Ant Design Vue V3版本填坑记录一】Table 组件 column.slots 报错
  • 1
    使用Vue.js构建交互式前端的技术探索
    89
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    168
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    132
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    150
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    184
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    104
  • 7
    vue3中使用动态组件
    102
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    141
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    76
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    120

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 淘宝应用架构 Reactive 实践

    • 相关实验场景

    更多
  • 小试牛刀，一键部署电商商城
    • 下一篇
    DataWorks