使Vuex实现单页面简易购物车，初识vuex

最新推荐文章于 2024-03-12 18:07:00 发布

waku_bond

最新推荐文章于 2024-03-12 18:07:00 发布

阅读量496

点赞数

文章标签： javascript html 前端 vue.js html5

本文链接：https://blog.csdn.net/VA_Jkwu/article/details/131341065

版权

1.介绍

该购物车是以列表的形式展示出购买的商品信息(商品的名称，单价，数量)，并能对商品的数量进行修改，也可以将商品从购物车中删除，商品种类和数量发生变化时，购物车商品总价实时更新。运用Vuex管理购物车中的商品数据状态。

2.代码实现

1)页面搭建

<body>
		<div id="app">
		<!-- 显示商品栏和购物车栏，建立页面结构-->
			<div class="shop-box"> 
				<h4>商品栏</h4>
				<table>
					<tr>
						<th><p>商品编号</p></th>
						<th><p>商品名称</p></th>
						<th><p>商品价格</p></th>
						<th><p>商品数量</p></th>
						<th><p>操作</p></th>
					</tr>
					<tr v-for="(item,index) in this.$store.state.todos">
						<td>{{item.id}}</td>
						<td>{{item.text}}</td>
						<td>¥{{item.price}}</td>
						<td>{{item.count}}</td>
						<td><span class="sp1" @click="add(item,index)">Add</span></td>
						<td><span class="sp2" @click="del(index)">Del</span></td>
					</tr>
				</table>
			</div>
			<div class="shop-box" v-if="iShow">
				<h4>购物车</h4>
				<table>
					<tr>
						<th><p>商品名称</p></th>
						<th><p>商品价格</p></th>
						<th><p>商品数量</p></th>
					</tr>
					<tr v-for="(good,index) in this.$store.state.goods">
						<td>{{good.text}}</td>
						<td>¥{{good.price}}</td>
						<td>{{good.count}}</td>
						<td><span class="sp2" @click="sub(index)">-</span></td>
					</tr>
					<tr>
						<td><span>价值：{{toel}}</span></td>
					</tr>
				</table>
			</div>
		</div>
	</body>

vue根实例中已经挂载了store，直接用this.$store获取state中的数据对象。

2)CSS样式

<style>
		#app {
			position: relative;
		}
		.shopcar{
			margin-top: 200px;
		}
		 table{
			border-collapse: collapse;
			text-align: center;
		}
		table tr{
			border-bottom: 1px solid rgb(218, 218, 218);
		}
		table tr td{
			padding:10px 5px;
			font-weight: bolder;
		}
		table tr th{
			padding: 0 5px;
		}
		table tr th p {
			margin: 20px 0;
			padding:0 25px;
			border-right: 1px solid rgb(218, 218, 218);
		}
		.sp1 {
			color: rgb(0, 174, 243);
		}
		.sp2 {
			color: rgb(255, 112, 112);
		}
	</style>

没有样式的苦，我吃就够了qwq。就是简洁的表格样式。

3)根实例创建

创建的根实例，需要通过id属性绑定到页面结构最外层的div内，这样才能使用到该实例中的方法和数据。（因为是单页面显示购物车和商品，没有用到路由，所以用id=“app”的div把整个包起来就好了）

var vm=new Vue({
			el:'#app',
			data:{
				shopp_iShow:true
			},
			computed:{
				toel(){ //总价值
					return this.$store.getters.getGoodsPrice
				},
				iShow(){ //购物车长度
					return this.$store.getters.isShowGoods
				},
				data_iShow(){ //商品栏长度
					return this.$store.getters.isShowTodos
				},
			},
			store,
			methods:{ //提交到actions
				add(item,index){ 
					this.$store.dispatch('ad',{item,index})
				},
				del(index){
					this.$store.dispatch('dl',index)
				},
				sub(it){
					this.$store.dispatch('sb',it)
				}
			},
		})

iShow()方法是判断购物车中的长度，来判断是否显示“购物车容器”。它的长度是从vuex创建的store中的getters中的isShowGoods()方法中获取的。
定义的这几个方法都是数据影响着视图，所以放在计算属性computed中，但需要注意这里computed并不是直接就能直接获取到的需要的数据的。

3)vuex的创建

const store = new Vuex.Store({
			state:{
				goods:[],  //购物车信息
				todos:[//商品栏信息
					{'id':1,'text':'薯片','price':3,'count':10},
					{'id':2,'text':'雪糕','price':5,'count':5},
					{'id':3,'text':'花生','price':8,'count':13},
					{'id':4,'text':'花生酱','price':10,'count':8}
				],        
			},
			mutations:{
				tian(state,waku){       //从商品中添加到购物中
					const v=state.goods.find(v=>v.id === waku.item.id)
					//查找购物车中是否有当前选中的商品
					if(v){   //找到的话
						if(waku.item.count>=1){
							waku.item.count--      //商品栏中所选中的商品数量-1
							++v.count         //购物车中的对应商品+1
						}else{
							state.todos.splice(waku.index,1)  //当所选择的商品数量<1时，将其移除
						}
					}else{  //没有找到的话
						waku.item.count--   //商品栏中所选中的商品数量-1
						state.goods.push({   //将商品栏所选的商品添加进购物车中
							'id':waku.item.id,
							'text':waku.item.text,
							'price':waku.item.price,
							'count':1
						})
					}	
					state.todos = state.todos.filter(todo => todo.count >= 1);
					//过滤掉数量小于1的商品
				},

				jian(state,index){	//从购物车中减回到商品栏中
					state.goods[index].count--  //购物车中所选的商品数量-1
					const v=state.todos.find(good=>good.id === state.goods[index].id)
					 //查找当前减的购物车中的商品在商品栏中是否还存在
					if(!v){    //不存在的话
						state.todos.push({    //将购物车中此商品退回到商品栏中
							'id':state.goods[index].id,
							'text':state.goods[index].text,
							'price':state.goods[index].price,
							'count':1
						})
					}else{      //存在的话
						v.count++ //商品栏中对应商品+1
					}
					state.goods = state.goods.filter(good => good.count >= 1);	//过滤
					state.goods.forEach((goods,index,arr)=>{ //购物车中的商品数量<1时，将商品删
						if(goods.count < 1){
							arr.splice(index,1)
						}
					})
				},
				shan(state,it){ //删除商品栏中商品
					state.todos.splice(it,1)
				}
			},
			actions:{ 		//异步提交到mutations
				ad(context,waku){
					context.commit('tian',waku)
				},
				sb(context,index){
					context.commit('jian',index)
				},
				dl(context,it){
					context.commit('shan',it)
				}
			},
			getters:{ 
				getGoodsPrice(state){ //计算总价值
					var t=0,s=0;
					state.goods.forEach(item => {
						t=item.count*item.price
						s=s+t
					})
					return s
				},
				isShowGoods(state){ //返回购物车数组的长度
					return state.goods.length
				},
				isShowTodos(state){ //返回商品栏数组的长度
					return state.todos.length
				}
			}
		})

用到state做仓库存放数据，mutations内写方法，actions用作异步执行去找mutations，其中getters就相当于时vue中的计算属性。

4)运行截图

在这里插入图片描述

5)总结

注意：vuex必须要在vue根实例之前实例化创建出来，并且在根实例内引用。别忘了在文档开头应用vue.js和vuex%20v3.0.0.js

好的，以上就是我这个初学者对vuex的一点浅薄的理解和实践。

waku_bond

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使Vuex实现单页面简易购物车，初识vuex

该购物车是以列表的形式展示出购买的商品信息(商品的名称，单价，数量)，并能对商品的数量进行修改，也可以将商品从购物车中删除，商品种类和数量发生变化时，购物车商品总价实时更新。运用Vuex管理购物车中的商品数据状态。注意：vuex必须要在vue根实例之前实例化创建出来，并且在根实例内引用。别忘了在文档开头应用vue.js和vuex%20v3.0.0.js好的，以上就是我这个初学者对vuex的一点浅薄的理解和实践。
复制链接

扫一扫