Web前端最全vuex实现购物车的增加减少移除，web前端面试题及答案2024

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。

}, 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(商品列表)

跳转到购物车

<el-button @click=“addCar(scope.row)” type=“text” size=“small”>加入购物车

3. car.vue(购物车)

合计：总共{{count}}个商品，总价{{totalPrice}}元

空空如也！·······

<el-button @click=“reduceFun(scope.row)” type=“text” size=“small”>-

{{scope.row.num}}

<el-button @click=“addCar(scope.row)” type=“text” size=“small”>+

<el-button @click=“deleteFun(scope.row)” type=“text” size=“small”>删除