相信很多小伙伴在操作购物车时没有思路，不知如何操作
下边我来给大家讲解购物车的具体操作
废话不多说上代码
view视图 弟弟我为了方便大家学习 就不拆分组件了
<template> <div> <Header/> <!-- 购物车页面 --> <div class="cart-wrapper"> <div class="cart"> <!-- for循环所有的购物车数据 用于展示 --> <div class="cartItem" v-for="(item,index) in data" :key="index"> <div class="cartItem-check"> <!-- 单选框 --> <!-- 在我们加入购物车时可以自行加入数据里边一个数量num、、、一个check属性赋值为false --> <!-- 让我们的单选框v-model绑定此条数据的check属性 --> <input type="checkbox" v-on:change="checkk" v-model="item.check" /> </div> <div class="cartItem-img"> <img :src="item.img" alt /> </div> <div class="cartItem-mess"> <h4>{{item.name}}</h4> <p> <span class="price">{{item.price | addCurrencyTag1}}</span> <span class="num"> <!-- 操作数量减 --> <button v-on:click="sub(item)">-</button> <span>{{item.num}}</span> <!-- 操作数量加 --> <button v-on:click="add(item)">+</button> </span> </p> </div> </div> </div> </div> <div class="footer"> <div class="qx"> <!-- 全选框 --> <input type="checkbox" v-model="showChecked" v-on:change="qx"/>全选 </div> <div class="totalNum">{{totalNum}}</div> <div class="totalMoney">{{`￥${totalMoney}`}}</div> </div> </div></template><script>import Header from '../components/Header'export default { name: '', data() { return { }; }, components:{ Header }, computed:{ // 计算属性获取vueX中的购物车数据 data(){ return this.$store.state.cartList }, showChecked(){ return this.$store.state.cart.isChecked }, // 计算总量 totalNum(){ let aa=0 let list=this.$store.state.cartList list.map((m)=>{ // if判断购物车商品的check属性，如果为true则参与计算 if(m.check){ aa+=m.num } }) return aa }, // 计算总价 totalMoney(){ let aa=0 let list=this.$store.state.cartList list.map((m)=>{ // if判断购物车商品的check属性，如果为true则参与计算 if(m.check){ aa+=m.num*m.price } }) return aa } }, watch:{ }, methods: { // 以下操作都在vuex中操作 下图为vueX数据操作 add(m){ this.$store.dispatch("cart/add",m) }, sub(m){ this.$store.dispatch("cart/sub",m) }, checkk(){ this.$store.dispatch("cart/isChecked") }, qx(){ let aa=window.event.target.checked this.$store.dispatch("cart/qx",aa) } }, filters: { // 文本过滤 addCurrencyTag1(value) { var tempPrice = parseFloat(value).toFixed(2); return `￥${tempPrice}`; }, },};</script>vueX购物车模块
const cart ={ namespaced:true, state:()=>{ return{ // 购物车数据， cartList:JSON.parse(window.localStorage.getItem("cart"))||[], // 全选按钮绑定 isChecked:false } }, mutations:{ // 数量加操作 add(state,item){ // 通过findIndex找到对应商品的下标 let index=state.cartList.findIndex((el)=>{ return item.id==el.id }) // 操作商品的数量++ state.cartList[index].num++ // 防止数据丢失我们存在localStorage中 window.localStorage.setItem("cart",JSON.stringify(state.cartList)) }, // 数量减操作 同上 sub(state,item){ let index=state.cartList.findIndex((el)=>{ return item.id==el.id }) state.cartList[index].num-- // 如果购物车数量小于1则删除此商品 if(state.cartList[index].num<1){ state.cartList.splice(index,1) } window.localStorage.setItem("cart",JSON.stringify(state.cartList)) }, qx(state,i){ state.cartList.map((m)=>{ m.check=i console.log(m) }) }, // 判断所有商品的单选框是否选中 如果选中则全选按钮也选中 isChecked(state){ let is= state.cartList.every((el)=>{ return el.check==true }) state.isChecked=is } }, actions:{ addCart(cont,item){ cont.commit("addCart",item) }, add(cont,item){ cont.commit("add",item) }, sub(cont,item){ cont.commit("sub",item) }, qx(cont,check){ cont.commit("qx",check) }, isChecked(cont){ cont.commit('isChecked') } }}export default cart通过上边的代码相信大家对于购物车有了基本操作的思路和想法
欢迎联系我交流讨论
