Vue购物车（购物车简易版）

首先了解一下效果实现流程

       1. 首先我们在views中创建两个vue项目，(商品页和购物车页)        

        2.在我们商品页拿到我们的数据进行渲染，给每个商品加入一个点击事件，当点击加入购物车页

        3.在购物车页来计算商品的综合加钱，单个的加减

功能的实现

商品页实现流程

        我们通过本地储存localStorage存储到本地，然后在我们Vue项目中的store中创建一个空的对象，来放置我们存在本地的数据，我们在商品页拿取我们vuex中回去的数据进行渲染，我们在vuex中在创建一个我们加入购物车春芳数据的地方，当我们点击商品页的加入购物车，添加进去

 商品页代码：

vuex代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    goodsData:[],
    cartData:[],
  },
  mutations: {
    SET_GODDS(state,data){
      const {goodsData,cartData}=data;
      state.goodsData=goodsData;
      state.cartData=cartData
    },
    SET_CART(state,data){
      const {id,name,slogan,price,_type,img}=data;
//获取下标
      const index=state.cartData.findIndex(item=>item.id==id);
      if(index==-1){
//这里是我们的点击加入购物车把他添加进我们创建空的对象
        state.cartData.push({
          id,name,slogan,price,_type,img, 
          mount:1,
          tPrice:price,
          select:true
        })
//这里结算我们是点击加还是减
      }else{
        let item=state.cartData[index];
        if(_type=='ADD'){
          item.mount+=1;
          item.tPrice+=price;
        }else if(_type=='SUBTRACT'){
          if(item.mount>1){
            item.mount-=1;
            item.tPrice-=price;
          }else{
            alert("数量不能再减少了")
          }
        }
      }
      localStorage.setItem('cartData',JSON.stringify(state.cartData));
    },
  },
  actions: {
    setGoods({commit}){
//存到本地
      const goodsData=JSON.parse(localStorage.getItem('goodsData'))||[];
      const cartData=JSON.parse(localStorage.getItem('cartData'))||[];
      commit('SET_GODDS',{
        goodsData,cartData
      })
    },
    setCart({commit},data){
      commit('SET_CART',data)
    },
  },
  modules: {
  }
})

购物车页实现流程

        获取我们点击加入购物车添加的数据，进行渲染，这里的商品加减我们在商品页的是时候已经做个计算了我们在这里不用在做加减的计算，只需要来计算他的总价和总数量，我们现在vuex中创建两个存放我们计算后存放数据的地方

购物车页代码实现：

vuex中：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    goodsData:[],
    cartData:[],
//这里就是我们存放总价钱和总数量的
    totalMount:0,
    totalPrice:0,
  },
  mutations: {
    SET_GODDS(state,data){
      const {goodsData,cartData,totalMount,totalPrice}=data;
      state.goodsData=goodsData;
      state.cartData=cartData
      state.totalPrice=totalPrice
      state.totalMount=totalMount
    },
    SET_CART(state,data){
      const {id,name,slogan,price,_type,img}=data;
      const index=state.cartData.findIndex(item=>item.id==id);
      if(index==-1){
        state.cartData.push({
          id,name,slogan,price,_type,img, 
          mount:1,
          tPrice:price,
          select:true
        })
      }else{
        let item=state.cartData[index];
        if(_type=='ADD'){
          item.mount+=1;
          item.tPrice+=price;
        }else if(_type=='SUBTRACT'){
          if(item.mount>1){
            item.mount-=1;
            item.tPrice-=price;
          }else{
            alert("数量不能再减少了")
          }
        }
      }
      localStorage.setItem('cartData',JSON.stringify(state.cartData));
    },
    SET_TOTAL(state){
//首先我们把数据清零
      state.totalMount=0
      state.totalPrice=0
//然后用map计算价格进行赋值
      state.cartData.map(item=>{
        state.totalMount+=item.mount
        state.totalPrice+=item.tPrice
      })
       
      localStorage.setItem('totalMount',JSON.stringify(state.totalMount));
      localStorage.setItem('totalPrice',JSON.stringify(state.totalPrice));
    }
  },
  actions: {
    setGoods({commit}){
      const goodsData=JSON.parse(localStorage.getItem('goodsData'))||[];
      const cartData=JSON.parse(localStorage.getItem('cartData'))||[];
      const totalPrice=JSON.parse(localStorage.getItem('totalPrice'))||0;
      const totalMount=JSON.parse(localStorage.getItem('totalMount'))||0;
      commit('SET_GODDS',{
        goodsData,cartData,totalMount,totalPrice
      })
    },
    setCart({commit},data){
      commit('SET_CART',data)
    },
    setTotal({commit},data){
      commit('SET_TOTAL',data);
    },
  },
  modules: {
  }
})

是不是很简单呀！相信你页可以很快掌握的。加油！！