创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商,新人活动买多久送多久,划算不套路!
我们拥有10多年网页设计和网站建设经验,从网站策划到网站制作,我们的网页设计师为您提供的解决方案。为企业提供做网站、成都网站建设、微信开发、微信小程序定制开发、手机网站制作设计、H5页面制作、等业务。无论您有什么样的网站设计或者设计方案要求,我们都将富于创造性的提供专业设计服务并满足您的需求。这篇文章主要介绍如何用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 } }, })
网页题目:如何用vuex实现购物车的增加减少移除-创新互联
网站网址:https://www.cdcxhl.com/article26/dpdsjg.html
成都网站建设公司_创新互联,为您提供企业建站、Google、网站设计、云服务器、建站公司、网站制作
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联