本文实例为大家分享了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>

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