本篇文章小编给大家分享一下vue实现购物车功能代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
如图,需要有加入购物车的标识
思路如下:点击购物车按钮时将商品的id,title,imgUrl(海报图),flag(标识符,flag非常重要,为以后复选框判断是否选中做参考)变成一个数组形式,cart,传入vuex
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;i3.购物车
思路如下:若没有产品则显示无产品,若有产品在购物车里,则可进行增删加减