How to realize the function of Shopping cart by vue

本篇内容主要讲解"vue如何实现购物车功能"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"vue如何实现购物车功能"吧!

如图，需要有加入购物车的标识思路如下：点击购物车按钮时将商品的id,title,imgUrl(海报图),flag（标识符，flag非常重要，为以后复选框判断是否选中做参考）变成一个数组形式，cart，传入vuex

import { Toast } from 'vant'; import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'; export default { name: 'tabs', data(){ return{ } }, props:{ id:String, current:String, title:String, imgUrl:String }, components:{ [Toast.name]: Toast, [GoodsAction.name]: GoodsAction, [GoodsActionIcon.name]: GoodsActionIcon, [GoodsActionButton.name]: GoodsActionButton }, methods: { onClickIcon() { Toast('点击图标'); }, onClickButton() { var cart={id:this.id,current:this.current,num:1,title:this.title,imgUrl:this.imgUrl,flag:true} this.$store.commit('addCart',cart) Toast('已加入购物车'); }, }, }

2.vuex如下

import Vue from 'vue'import Vuex from 'vuex'import mutations from './mutations.js'Vue.use(Vuex)export default new Vuex.Store({ state: { cart:[], money:0, allchecked:true }, mutations,})export default{、//判断是否已经加入过购物车，如果加入过，则该产品数量加一，若没有加入过，将产品加入cart中 addCart(state,data){ for(var i=0;i import('./components/bottom.vue') }, computed: { getAll() { var money = 0 this.$store.state.cart.forEach(item => { if (item.flag) { money += (item.num * item.current) * 100 } }) return money } }, methods: { //选择单个复选框（非常重要） //由于我进来是使复选框全选，则在第一次点击的时候使得flag=false chooseChange(i, item) { if (this.result.indexOf(i) > -1) { var arrs = this.result.filter(function(item) { return item != i; }); this.result = arrs; item.flag = false; } else { this.result.push(i); item.flag = true; } //判断单个和全部，若单个全选，则this.$store.state.allchecked为true if (this.result.length

< this.$store.state.cart.length) { this.$store.state.allchecked = false; this.allchecked = this.$store.state.allchecked; } else { this.$store.state.allchecked = true; this.allchecked = this.$store.state.allchecked; } }, //全选状态 allOrder() { //如果选择状态为选中的时候，设置this.$store.state.allchecked=false变成未选中 if (this.$store.state.allchecked) { this.$store.state.cart.forEach(item =>

{ item.flag = false; }) this.result = []; this.$ store.state.allchecked = false; this.allchecked = this.$ store.state.allchecked; } else { this.$ store.state.cart.forEach(item => { item.flag = true; if (this.result.indexOf(item.id)

< 0) { this.result.push(item.id); } }) this.$store.state.allchecked = true; this.allchecked = this.$store.state.allchecked; } }, //数字+ add(index) { this.$store.commit('addCartNum', index) }, //数字减 jian(index) { this.$store.commit('jianCartNum', index) }, //点击管理 onAdmin() { this.select = false }, //点击完成 onOk() { this.select = true if(this.result.length==0){ console.log(1) this.isGood=false }else{ console.log(this.result) } }, //删除 del() { if (this.result.length == this.$store.state.cart.length) { this.$store.state.cart.splice(0, this.result.length) this.result.splice(0, this.result.length) } else { this.$store.state.cart.forEach(item =>

{ if (item.flag) { this.$ store.state.cart.splice(item, 1) this.result.splice(item.id, 1) } }) } } }, created() { this.cartList = this.$ store.state.cart if (this.$ store.state.allchecked) { for (var i = 0; i < this.$ store.state.cart.length; i++) { this.result.push(this.$ store.state.cart[i].id) } } if(this.result.length==0){ this.isGood=false } } } At this point, I believe that everyone has a deeper understanding of "how to realize the shopping cart function of vue". You may wish to actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!