vue实现购物车功能代码示例

本篇文章小编给大家分享一下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;i

	 


	 


	3.购物车


	思路如下：若没有产品则显示无产品，若有产品在购物车里，则可进行增删加减