vue3项目中实现 购物车数据更新效果

上面这段代码,是获取购物车订单列表
第一步: 声明一个变量,接收购物车的数据 arr.map 返回一个根据SKU 的id查找的异步函数, 也就是return 后面的函数调用
注意: 这里的 购物车数组,使用vue3中,数据响应式的方法
第二步: 这是一个异步的函数,需要全部加载完步以后, 才能使用then的方法, 接收到返回到数据以后,开始 调用store里面,第四 dispatch 调用vuex中,

---

代码改写

---

上面的方式是在vue组件之中, 这种是在store对应的模块中

当vue组件中,事件触发就调用store中的函数 ,上面的代码就是在store对应的模块中,
第一步:在store 的js文件中 actions 内部使用
第二步:判断是不是有token 没有的话 走else 同时声明变量,调用state中的数据,使用map方法, 返回函数调用的 数组
第三步:使用promise.all() 请求所有的购物车信息,使用then 的方法,将返回值 作为一个数组 开始foreach遍历 使用commit 的方法,调用mutations中的函数, 将请求回去的结果一个一个的修改