Vue3 购物车逻辑

添加购物车了逻辑

state: {//购物车列表的数据shopcar: []},
mutations: {add(state, value) {// 声明一个变量flag=false  如果是这个变量的值为false  代表购物车中有没有这个商品let flag = false//循环购物列表的数据state.shopcar.forEach(item => {//判断如果列表数据的id等于传参到的idif (item._id == value._id) {flag = trueitem.num++}})//往购物车中添加数据 如果 已经存在就 让num++if (flag == false) {//如果flag是false  那么这个数据第一次加购物车 添加属性 数量是1value.num = 1// 添加status属性，用于复选框的状态value.status = false//在 vue2中如果本来没有这个字段 我们想要新添加一个字段 //如果直接val.num这样给一个字段的话 这个字段不是响应式 //所以在vue2的时候用set新添加字段   Vue.set(val, "num", 1);// vue3 中升级了 普通的添加  val.num = 1; 也是响应式的// Vue.set(value, "num", 1)//向购物车数据添加state.shopcar.push(value)//当这个数据是第一次添加，全选框变成falsestate.checked = false}//如果不存在 就往里面push 并且给一个初始的num值为1}
}

全选反选逻辑

state: {//这个是全选的状态，用于v-module绑定checkall:false},
//change是当单选框发生改变是触发
change(state){//定义一个res 用every来筛选//every是每一个元素都符合条件才返回true，否则返回false。let res = state.shopcar.every((item)=>{return item.status == true})//如果res返回的是true ，checkall的值变成true//如果res返回的是false，checkall的值变成falseif(res){state.checkall= true} else{state.checkall = false}},//全选时间发生改变时checkall(state){  //先判断checkall的值是否等于true 如果是 循环所有数据，让他们的status都变成true//如果是checkall的值是否等于false 循环所有数据，让他们的status都变成falseif (state.checkall == true) {state.shopcar.forEach((item) => {item.status = true;});} else {state.shopcar.forEach((item) => {item.status = false;});}},

选中删除逻辑

//删除选中数据
clear(state){//筛选所有数据，条件满足的重新返回给shopcer//返回数据是false的数据，false就是没选中的数据//filter筛选数组所有的项-返回满足条件的元素, 会全部遍历一遍state.shopcar = state.shopcar.filter((item) => {return item.status == false})//删除完之后让checkall的值变回falsestate.checked = false}

数量的加减逻辑

    //数量增加  需要发送数据的idjia(state,id){//先循环一遍数据state.shopcar.forEach(item=>{//如果item的id和接受的id一样 就让数据里面的num++if(item._id == id){item.num++}})},//数量增加  需要发送数据的idjian(state,id){ //先循环一遍数据state.shopcar.forEach(item=>{//如果item的id和接受的id一样 就让数据里面的num--if(item._id == id){//判断item.num的数量是否小于等于1 如果小于等于1 就return 不会执行下面的属性if(item.num<=1){alert('数量最低一件')return}item.num--}})},

总数量，总价格逻辑

计算东西需要在计算属性下代码 getters

getters: {//计算价格allPrice(state) {//先定义一个变量let price = 0;//循环所有数据 state.shopcar.forEach((item) => {//如果数据的status 等于trueif (item.status == true) {//定义的数据+= 价格*数量price += item.price * item.num;}});//返回给allPricereturn price;},//计算数量allNum(state){//定义一个变量let num = 0;//循环所有数据state.shopcar.forEach((item) => {//如果数据的status 等于trueif (item.status == true) {//变量的数据+=item数据的数量num += item.num;}});//返回给allNumreturn num}},

Vue3 购物车逻辑相关推荐

vue3购物车(全选，反选，数量计算)
1.首先,你需要准备一个文件夹,目录内容如下 2.其次,css中创建一个style.css,内容如下 * {margin: 0;padding: 0;box-sizing: border-box; } ...
【商城购物车】购物车逻辑
转载于:https://www.cnblogs.com/xuzhengzong/p/8746677.html
redis持久化和购物车实现逻辑
一.RDB(快照)持久化:保存某个时间点的全量数据快照 redis.conf save 60 1 代表Redis在60秒内写入一条数据那么进行快照 stop-writes-on-basave-erro ...
购物车及下单的逻辑知识点
目录添加查询删除购物车逻辑及其代码难点-代码复杂下单功能项目基于spring boot,同样都是需要mvc三层架构+实体bean类. 在这先抛出几个问题.如何添加购物车,如何查询购物车,如何删除 ...
小程序购物车的逻辑,写的一个假数据
//Page Object 小程序的购物车逻辑 Page({ data: { cartItems: [], hasList: false,//列表是否有数据 total: 0, checkAll: t ...
美多商城之购物车(购物车管理3)
2.5 全选购物车提示:在购物车页面修改购物车使用局部刷新的效果. 2.5.1. 全选购物车接口设计和定义 1.请求方式选项方案请求方法 PUT 请求地址 /carts/selection/ ...
MVC在基控制器中实现处理Session的逻辑
当需要跨页面共享信息的时候,Session是首当其冲的选择,最典型的例子就是:在处理登录和购物车逻辑的时候需要用到Session.在MVC中,可以把处理Session的逻辑放在一个泛型基控制器中,但需 ...
云炬Android开发笔记 13购物车，订单，支付功能开发（包含支付宝支付和微信支付）
阅读目录 1.购物车UI编写 1.1 购物车布局 1.2 recycleView中的item的布局 2. 购物车数据结构分析.解析与转化 2.1 解析的数据 2.2 数据的转化 2.3 数据适配器的 ...
session实现购物车
1.是什么? session 可以存储会话级变量,基于其实现购物车: 2.为什么? session是会话级变量,可以吧多次请求的数据串联起来,放到会话里: 3.怎么做? [荔枝]转自张孝祥登录页面 ...

Vue3 购物车逻辑

Vue3 购物车逻辑相关推荐

最新文章

热门文章