vuex怎么实现简单的购物车功能
导读:本文共3077.5字符,通常情况下阅读需要10分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 文件目录如下:购物车组件<template><div><h1>vuex-shopCart</h1><divclass="shop-listbox"><shop-list/></div><h2>已选商品</h2><di... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。文件目录如下:
购物车组件
<template><div><h1>vuex-shopCart</h1><divclass="shop-listbox"><shop-list/></div><h2>已选商品</h2><divclass="shop-cartbox"><shop-cart/></div></div></template><script>importshoListfrom"./shop-list"importshopCartfrom"./shop-cart"exportdefault{name:"shop",components:{"shop-list":shoList,"shop-cart":shopCart}}</script><!--Add"scoped"attributetolimitCSStothiscomponentonly--><stylescoped></style>
商品列表
<template><divclass="shop-list"><table><trclass="shop-listtitle"><td>id</td><td>名称</td><td>价格</td><td>操作</td></tr><trv-for="iteminshopList"class="shop-listinfo":key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td><button@click="addToCart(item)">加入购物车</button></td></tr></table></div></template><script>import{mapGetters,mapActions}from"vuex";exportdefault{name:"shopList",computed:{...mapGetters({shopList:"getShopList",})},methods:{...mapActions(["addToCart"])},}</script>
选中商品列表
<template><divclass="shop-list"><table><trclass="shop-listtitle"><td>id</td><td>名称</td><td>价格</td><td>数量</td><td>操作</td></tr><trv-for="itemincartData"class="shop-listinfo":key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td>{{item.num}}</td><td><buttonclass="shop-deledele-btn"@click="deleteShop(item)">删除</button></td></tr><trv-if="cartData.length<=0"><tdcolspan="5">暂无数据</td></tr><tr><tdcolspan="2">总数:{{totalNum}}</td><tdcolspan="2">总价格:{{totalPrice}}</td><td><buttonclass="dele-cartdele-btn"@click="clearCart">清空购物车</button></td></tr></table></div></template><script>import{mapGetters,mapActions}from"vuex"exportdefault{name:"shopCart",data(){return{}},computed:{...mapGetters({cartData:"addShopList",totalNum:"totalNum",totalPrice:"totalPrice"})},methods:{...mapActions({clearCart:"clearToCart",deleteShop:"deletToShop"})}}</script>
vuex 创建
npm install vuex --save,创建vuex文件夹,在文件夹中创建store.js,引入vuex;
store.js
importVuefrom"vue"importVuexfrom"vuex"importcartfrom"./modules/cart"Vue.use(Vuex)exportdefaultnewVuex.Store({modules:{cart}})
建立一个模块文件夹modules,里面创建创建当个store模块,然后默认输出,在store.js中引入;
cart.js
conststate={shop_list:[{id:11,name:"鱼香肉丝",price:12},{id:22,name:"宫保鸡丁",price:14},{id:34,name:"土豆丝",price:10},{id:47,name:"米饭",price:2},{id:49,name:"蚂蚁上数",price:13},{id:50,name:"腊肉炒蒜薹",price:15}],add:[]}constgetters={//获取商品列表getShopList:state=>state.shop_list,//获取购物车列表addShopList:state=>{//map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值returnstate.add.map(({id,num})=>{letproduct=state.shop_list.find(n=>n.id==id)//find()方法返回通过测试(函数内判断)的数组的第一个元素的值,如果没有符合条件的元素返回undefinedif(product){//如果存在该商品return{//返回对象...product,num}}})},//获取总数量totalNum:(state,getters)=>{lettotal=0getters.addShopList.map(n=>{total+=n.num})returntotal},//计算总价格totalPrice:(state,getters)=>{lettotal=0getters.addShopList.map(n=>{total+=n.num*n.price})returntotal}},constactions={//加入购物车addToCart({commit},product){commit("addCart",{id:product.id})},//清空购物车clearToCart({commit}){commit("clearCart")},//删除单个物品deletToShop({commit},product){commit("deletShop",product)}}constmutations={//加入购物车addCart(state,{id}){letrecord=state.add.find(n=>n.id==id)if(!record){//如果购物车中不存在该商品state.add.push({//追加商品id,num:1})}else{//如果商品已经加入购物车,则改变数量record.num++}},//删除单个物品deletShop(state,product){state.add.forEach((item,i)=>{if(item.id==product.id){//如果找到该商品state.add.splice(i,1)}})},//清空购物车clearCart(state){state.add=[]}}exportdefault{state,getters,actions,mutations}
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:
vuex怎么实现简单的购物车功能的详细内容,希望对您有所帮助,信息来源于网络。