一聚教程网:一个值得你收藏的教程网站

热门教程

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

时间:2022-06-29 01:49:44 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下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.购物车

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