vuex实现购物车的增加减少移除

本文实例为大家分享了vuex实现购物车增加减少移除的具体代码，供大家参考，具体内容如下

1.store.js（公共的仓库）

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
 
export default new Vuex.Store({
 state: {
  carList: [] //购物车的商品
 },
 mutations: {
  // 加
  addCar(state, params) {
   let CarCon = state.carList;
   // 判断如果购物车是否有这个商品，有就只增加数量，否则就添加一个
   // some 只要有一个isHas为true,就为true
   let isHas = CarCon.some((item) => {
    if (params.id == item.id) {
     item.num++;
     return true;
    } else {
     return false;
    }
   })
 
   if (!isHas) {
    let obj = {
     "id": params.id,
     "title": params.title,
     "price": params.price,
     "num": 1,
    }
    this.state.carList.push(obj)
   }
  },
  // 减
  reducedCar(state,params){
   let len=state.carList.length;
   for(var i=0;i<len;i++){
    if(state.carList[i].id==params.id){
     state.carList[i].num--
     if(state.carList[i].num==0){
      state.carList.splice(i,1);
      break;
     }
    }
   }
  },
  //移出
  deleteCar(state,params){
   let len=state.carList.length;
   for(var i=0;i<len;i++){
    if(state.carList[i].id==params.id){
     state.carList.splice(i,1);
     break;
    }
   }
  },
 
   // 初始化购物车，有可能用户一登录直接进入购物车
  // initCar(state, car) {
  //  state.carList = car
  // },
 
 },
 actions: {
  // 加
  addCar({ commit }, params) {
   // console.log(params) //点击添加传过来的参数
   // 使用setTimeout模拟异步获取购物车的数据
   setTimeout(function () {
    let result = 'ok'
    if (result == 'ok') {
     // 提交给mutations
     commit("addCar", params)
    }
   }, 100)
  },
  // 减
  reducedCar({ commit }, params) {
   // console.log(params) //点击添加传过来的参数
   // 使用setTimeout模拟异步获取购物车的数据
   setTimeout(function () {
    let result = 'ok'
    if (result == 'ok') {
     // 提交给mutations
     commit("reducedCar", params)
    }
   }, 100)
  },
  // 移出
  deleteCar({ commit }, params) {
   // console.log(params) //点击添加传过来的参数
   // 使用setTimeout模拟异步获取购物车的数据
   setTimeout(function () {
    let result = 'ok'
    if (result == 'ok') {
     // 提交给mutations
     commit("deleteCar", params)
    }
   }, 100)
  }
  // initCar({ commit }) {
  //  setTimeout(function () {
  //   let result = 'ok'
  //   if (result == 'ok') {
  //    // 提交给mutations
  //    commit("initCar", [{
  //     "id": 20193698,
  //     "title": '我是购物车原来的',
  //     "price": 30,
  //     "num": 100,
  //    }])
  //   }
  //  }, 100)
  // }
 },
 getters: {
  //返回购物车的总价
  totalPrice(state) {
   let Carlen = state.carList;
   let money = 0;
   if (Carlen.length != 0) {
    Carlen.forEach((item) => {
     money += item.price * item.num
    })
    return money;
   } else {
    return 0;
   }
  },
  //返回购物车的总数
  carCount(state) {
   return state.carList.length
  }
 },
})

2. list.vue(商品列表)

 <template>
 <!-- 商品列表 -->
 <div id="listBox">
 <!-- -->
 <router-link :to="{path:'/car'}" style="line-height:50px">跳转到购物车</router-link>
 <el-table :data="tableData" border style="width: 100%">
  <el-table-column fixed prop="id" align="center" label="商品id"></el-table-column>
  <el-table-column prop="title" align="center" label="商品标题"></el-table-column>
  <el-table-column prop="price" align="center" label="商品价格"></el-table-column>
  <el-table-column label="操作" align="center">
  <template slot-scope="scope">
   <el-button @click="addCar(scope.row)" type="text" size="small">加入购物车</el-button>
  </template>
  </el-table-column>
 </el-table>
 </div>
</template>
 
<script>
export default {
 name: "listBox",
 data() {
 return {
  tableData: [] //商品列表
 };
 },
 methods: {
 // 初始化商品列表
 initTable(){
  this.$gAjax(`../static/shopList.json`)
  .then(res => {
   console.log(res)
   this.tableData=res;
  })["catch"](() => {});
 },
 // 加入购物车
 addCar(row){
  // console.log(row)
  // 提交给store里面actions 由于加入购物车的数据要同步到后台
  this.$store.dispatch('addCar',row)
 }
 
 },
 mounted () {
 this.initTable()
 }
};
</script>
<style>
#listBox {
 width: 900px;
 margin: 0 auto;
}
</style>

3. car.vue(购物车)

<template>
 <!-- 购物车 -->
 <div id="carBox">
 <!-- 商品总数 -->
 <h2 style="line-height:50px;font-size:16px;font-weight:bold">合计：总共{{count}}个商品，总价{{totalPrice}}元</h2>
 <p v-if="count==0">空空如也！·······</p>
 <div v-else>
  <el-table :data="carData" border style="width: 100%">
  <el-table-column fixed prop="id" align="center" label="商品id"></el-table-column>
  <el-table-column prop="title" align="center" label="商品标题"></el-table-column>
  <el-table-column prop="price" align="center" label="商品价格"></el-table-column>
  <el-table-column label="操作" align="center">
   <template slot-scope="scope">
   <el-button @click="reduceFun(scope.row)" type="text" size="small">-</el-button>
   <span >{{scope.row.num}}</span>
   <el-button @click="addCar(scope.row)" type="text" size="small">+</el-button>
 
   <el-button @click="deleteFun(scope.row)" type="text" size="small">删除</el-button>
   </template>
  </el-table-column>
  </el-table>
 </div>
 </div>
</template>
 
<script>
export default {
 name: "carBox",
 data() {
 return {};
 },
 computed: {
 //购物车列表
 carData() {
  return this.$store.state.carList;
 },
 //商品总数
 count() {
  return this.$store.getters.carCount;
 },
 //商品总价
 totalPrice() {
  return this.$store.getters.totalPrice;
 }
 },
 methods: {
 // 增加数量
 addCar(row){
  this.$store.dispatch('addCar',row)
 },
 // 减数量
 reduceFun(row){
  this.$store.dispatch('reducedCar',row)
 },
 // 删除
 deleteFun(row){
  this.$store.dispatch('deleteCar',row)
 }
 
 // 用户首次登录请求购物车的数据
 // initCar(){
 // this.$store.dispatch('initCar')
 // }
 },
 created () {
 // this.initCar();
 },
 mounted() {}
};
</script>
 
<style>
#carBox {
 width: 900px;
 margin: 0 auto;
}
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。