vuex实现购物车的增加减少移除
作者：缘飞梦
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。