vuex购物车案例

你有遗憾吗

于 2021-09-28 14:30:13 发布

阅读量1.2k

点赞数 1

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_61845534/article/details/120524480

版权

该博客通过一个具体的案例展示了如何在Vue.js应用中利用Vuex进行购物车管理。商品列表页负责商品数据的展示和添加到购物车操作，购物车页则实现了全选、单选、总计和删除等复杂功能。文章附带了商品列表页、购物车页及Vuex的完整代码示例，并建议不熟悉JavaScript数组迭代方法的读者查阅相关文档。

摘要由CSDN通过智能技术生成

案例有一个商品列表页和购物车页

商品列表页主要实现商品数据渲染到视图上,还有一个添加到购物车的功能.

购物车页主要是写全选,单选,总计,删除等功能

首先是商品列表页

<template>
	<div class="tj">
		<ul>
			<li class="tjl" v-for="(item,index) in goods">
				<img :src="item.img" alt="">
				<div class="ptype">
					<p>{
  {item.name}}</p>
					<span>￥{
  {item.price}}</span>
					<h3>{
  {item.sales}}人付款</h3>
					<button @click="adds(item)">添加</button>
                    item 可以理解位被adds当作参数拿来用,这里adds用作于添加到购物车的功能
				</div>
			</li>
		</ul>
	</div>
	
</template>
把goods中的数据渲染到视图中,这里就不多说了
export default {
	data() {
		return {
			
		}
	},
    computed(){
        这里是把vuex中的数据映射到vue实例中,使得视图中可以直接拿来用
        goods(){
            this.$store.state.goods
        }
    },
	methods:{
    // this.$store.commit('add',val)是调用mutations中的方法,add是mutations中的方法,val是传递给add的参数,然后重新命名一个函数名接收一下就可以直接使用mutations中的方法了
		adds(val){
			this.$store.commit('add',val) 
		}
	}
}

vue项目中store下的index.js中mutations中的方法
    add(state, val) {
            
			// 添加之前 先判断购物车里面是否有相同的商品
            state.carList.some(ele => ele.id == val.id) 这段代码是作于返回一个true或者false,
			if (state.carList.some(ele => ele.id == val.id)) {
    如果条件为true,就代表购物车里与你当前添加的这条商品是相同的就只让它的数量加1
   ,而不是再让它重新添加一条商品的形式显示
				var carItem = state.carList.find(ele => ele.id == val.id)
				console.log(carItem)
				carItem.num++ // 条件为true 数量加1
			} else {
            // 条件为false的话就以新商品格式添加到购物车
				var obj = {
					name: val.name,
					price: val.price,
					sales: val.sales,
					num: 1,
					id: val.id,
					isChecked: false,
					img: val.img
				}
                obj是仿造一条商品数据,只有商品数量是1,让商品加到购物车的初试数量为1,
				state.carList.push(obj)
			}
		  }
		},

上面商品列表页已经渲染好了接下来是购物车页面

<template>
	<div id="cart">
		<div class="backTop">
			<span @click="back()">返回</span>
			<span>购物车</span>
			<button class="remove" @click="clearRemove()">清空购物车</button>
		</div>
		<ul>
			<li class="tjl" v-for="(item,index) in carLists">
				<span class="int">
                    <input type="checkbox" v-model="item.isChecked"/>        
                </span>
				<img :src="item.img" alt="">
				<div class="ptype">
					<p>{
  {item.name}}</p>
					<span>￥{
  {item.price}}</span>
					<h3>{
  {item.sales}}人付款</h3>
				</div>
				<!-- <button class="remove" @click="removes(item)">删除</button> -->
				<div class="tost">
					<button @click="jian(item)">