vue购物车讲解

Posted 2020-12-23 gjf-7

vue购物车详细讲解

相信很多小伙伴在操作购物车时没有思路，不知如何操作

 

timg.jpg

 

下边我来给大家讲解购物车的具体操作

废话不多说上代码

view视图 弟弟我为了方便大家学习 就不拆分组件了

  1 <template>
  2   <div>
  3       <Header/>
  4       <!-- 购物车页面 -->
  5       <div class="cart-wrapper">
  6       <div class="cart">
  7         <!-- for循环所有的购物车数据 用于展示 -->
  8         <div class="cartItem" v-for="(item,index) in data" :key="index">
  9           <div class="cartItem-check">
 10             <!-- 单选框 -->
 11             <!-- 在我们加入购物车时可以自行加入数据里边一个数量num、、、一个check属性赋值为false -->
 12             <!-- 让我们的单选框v-model绑定此条数据的check属性 -->
 13             <input type="checkbox" v-on:change="checkk"  v-model="item.check" />
 14           </div>
 15           <div class="cartItem-img">
 16             <img :src="item.img" alt />
 17           </div>
 18           <div class="cartItem-mess">
 19             <h4>{{item.name}}</h4>
 20             <p>
 21               <span class="price">{{item.price | addCurrencyTag1}}</span>
 22               <span class="num">
 23                 <!-- 操作数量减 -->
 24                 <button v-on:click="sub(item)">-</button>
 25                 <span>{{item.num}}</span>
 26                 <!-- 操作数量加 -->
 27                 <button v-on:click="add(item)">+</button>
 28               </span>
 29             </p>
 30           </div>
 31         </div>
 32       </div>
 33     </div>
 34     <div class="footer">
 35       <div class="qx">
 36         <!-- 全选框 -->
 37         <input type="checkbox" v-model="showChecked" v-on:change="qx"/>全选
 38       </div>
 39       <div class="totalNum">{{totalNum}}</div>
 40       <div class="totalMoney">{{`￥${totalMoney}`}}</div>
 41     </div>
 42  
 43   </div>
 44 </template>
 45 
 46 <script>
 47 import Header from ‘../components/Header‘
 48 
 49 export default {
 50   name: ‘‘,
 51   data() {
 52     return {
 53         
 54     };
 55   },
 56   components:{
 57       Header
 58   },
 59   computed:{
 60     // 计算属性获取vueX中的购物车数据
 61       data(){
 62           return this.$store.state.cartList
 63       },
 64       showChecked(){
 65       return this.$store.state.cart.isChecked
 66     },
 67     // 计算总量
 68     totalNum(){
 69       let aa=0
 70       let list=this.$store.state.cartList
 71       list.map((m)=>{
 72         // if判断购物车商品的check属性，如果为true则参与计算
 73         if(m.check){
 74           aa+=m.num
 75         }
 76       })
 77       return aa
 78     },
 79     // 计算总价
 80     totalMoney(){
 81       let aa=0
 82       let list=this.$store.state.cartList
 83       list.map((m)=>{
 84         // if判断购物车商品的check属性，如果为true则参与计算
 85         if(m.check){
 86           aa+=m.num*m.price
 87         }
 88       })
 89       return aa
 90     }
 91   },
 92   watch:{
 93   },
 94   methods: {
 95     // 以下操作都在vuex中操作 下图为vueX数据操作
 96        add(m){
 97           this.$store.dispatch("cart/add",m)
 98       },
 99       sub(m){
100          this.$store.dispatch("cart/sub",m) 
101       },
102       checkk(){
103           this.$store.dispatch("cart/isChecked")
104       },
105        qx(){
106       let aa=window.event.target.checked
107       this.$store.dispatch("cart/qx",aa)
108     }
109   },
110   filters: {
111     // 文本过滤
112     addCurrencyTag1(value) {
113       var tempPrice = parseFloat(value).toFixed(2);
114       return `￥${tempPrice}`;
115     },
116   },
117 };
118 </script>

vueX购物车模块

 1 const cart ={
 2     namespaced:true,
 3     state:()=>{
 4         return{
 5             // 购物车数据，
 6             cartList:JSON.parse(window.localStorage.getItem("cart"))||[],
 7             // 全选按钮绑定
 8             isChecked:false
 9         }
10     },
11     mutations:{
12         // 数量加操作
13         add(state,item){
14             // 通过findIndex找到对应商品的下标
15             let index=state.cartList.findIndex((el)=>{
16                 return item.id==el.id
17             })
18             // 操作商品的数量++
19             state.cartList[index].num++
20             // 防止数据丢失我们存在localStorage中
21             window.localStorage.setItem("cart",JSON.stringify(state.cartList))
22         },
23         // 数量减操作 同上
24         sub(state,item){
25             let index=state.cartList.findIndex((el)=>{
26                 return item.id==el.id
27             })
28             state.cartList[index].num--
29             // 如果购物车数量小于1则删除此商品
30             if(state.cartList[index].num<1){
31                 state.cartList.splice(index,1)
32             }
33             window.localStorage.setItem("cart",JSON.stringify(state.cartList))
34         },
35         qx(state,i){
36             state.cartList.map((m)=>{
37                 m.check=i
38                 console.log(m)
39             })
40         },
41         // 判断所有商品的单选框是否选中 如果选中则全选按钮也选中
42         isChecked(state){
43            let is= state.cartList.every((el)=>{
44                 return el.check==true
45             })
46             state.isChecked=is
47         }
48     },
49     actions:{
50         addCart(cont,item){
51             cont.commit("addCart",item)
52         },
53         add(cont,item){
54             cont.commit("add",item)
55         },
56         sub(cont,item){
57             cont.commit("sub",item)
58         },
59         qx(cont,check){
60             cont.commit("qx",check)
61         },
62         isChecked(cont){
63             cont.commit(‘isChecked‘)
64         }
65     }
66 }
67 
68 export default cart

有什么瑕疵，欢迎大家指出