vuex实现购物车添加与删除功能

vuex实现购物车添加与删除功能

让我们一起来了解一下怎么用vuex来写一个购物车的功能,在这,小编写了一个demo作为参考

前期准备

第一步:用vue的脚手架创建项目

npm i vue-cli --g //如果已经全局安装过了,这步可以省去

第二步:初始化项目

npm init webpack 项目名称

第三步:安装vuex包

npm i vuex --save

第四步:新建store文件夹
在这里插入图片描述
接下来是代码部分,先看商品列表product.vue

商品列表(product.vue)

product.vue组件
<template>
    <div class="product">
        <h1>{{msg}}</h1>
        <table>
            <tr>
                <th>id</th>
                <th>名称</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
            <tr v-for='item in shoplist' :key='item.id'>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td> 
                    <div @click='addToCart(item)'>添加</div> 
                </td>
            </tr> 
        </table>
        
    </div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
export default {
    name:'product',
    data(){
        return{
            msg:'vuex购物车'
        }
    },
    computed:{
        ...mapGetters(['shoplist'])
    },
    methods:{
        ...mapActions(['addToCart'])
    }
}
</script>
<style>
table{
    width: 100%;
}
td{
    width: 20%;
    text-align: center;
}
h1{
    text-align: center;
    line-height:40px;
    font-size:32px;
    margin:20px 0;

}
.go{
    width: 100px;
    line-height: 40px;
    text-align: center;
    background-color: yellowgreen;
}
</style>

store文件夹
// 初始化数据,里面是商品列表
const state={
    //商品列表
    shoplist:[
        {id:1,name:'韭菜鸡蛋',price:10.00},
        {id:2,name:'水煮鱼片',price:30.00},
        {id:3,name:'青椒肉丝',price:15.00}
    ],
} 
// 向外输出数据的方法
const getters={
    // 购物车列表
    shoplist:state=>state.shoplist,
} 
// 导出
export default {
    state,
	getters,
	actions,
	mutations
}
  • 在cart.js中初始化商品列表数据
  • 在getters方法创建一个shoplist计算属性,让state下面的shoplist等于先创建的计算属性shoplist,并且向外输出shoplist
  • 在products组件中,用 mapGetters方法接收属性
  • 获取到计算属性shoplist,就可以渲染到视图中了
<tr v-for='item in shoplist' :key='item.id'>
  	<td>{{item.id}}</td>
   	<td>{{item.name}}</td>
   	<td>{{item.price}}</td>
   	<td> 
      	<div @click='addToCart(item)'>添加</div> 
   	</td>
</tr> 

添加到购物车(list.vue)

list.vue组件
<template>
    <div class="list">
        <h1>{{msg}}</h1>
        <table>
            <tr>
                <th>id</th>
                <th>名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            <tr v-for='item in cartProduct' :key='item.id'>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.num}}</td>
                <td> 
                    <div @click='addDetele(item)'>删除</div> 
                </td>
            </tr> 
        </table>      
    </div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
export default {
    name:'product',
    data(){
        return{
            msg:'已添加的商品'
        }
    },
    computed:{
        // 添加购物车
        ...mapGetters(['cartProduct'])
    },
    methods:{
        // 删除事件
        ...mapActions(['addDetele'])
    }
}
</script>
<style>
table{
    width: 100%;
}
td{
    width: 20%;
    text-align: center;
}
h1{
    text-align: center;
    line-height:40px;
    font-size:32px;
    margin:20px 0;
}
</style>
cart.js

给product上的添加按钮注册点击事件,运用vuex中的action方法,给addToCart事件实行异步数据操作

//新建一个空数组用来接收添加的数据
// 初始化数据,里面是商品列表
const state={
    // 添加购物车数据存储
    added:[]
} 
// 异步数据操作
const actions={
    // 添加到购物车
    addToCart({commit},n){
    //触发add事件
        commit('add',{
            id:n.id
        })
    }
}
//通过mutations方法,对数据做出改变
const mutations={
    // 添加到购物车
    add(state,{id}){
        // console.log(state,{id})
        //遍历added数组,find方法找出点击的id和added中的id是相等的情况下,这项数据让变量items接收
        let items=state.added.find(n=>n.id==id)
        //如果么有找到这项数据items,那么就添加到added数组中
        if(!items){
            state.added.push({id,num:1})
        }else{
        	//如果added数组中已经存在添加的数据了,那么就让数量加加
            items.num++
        }
    },
}
// 向外输出数据的方法
const getters={
    // 添加购物车计算属性
    cartProduct:state=>{
        return state.added.map(({id,num})=>{
            let _n=state.shoplist.find(n=>n.id===id)
            return {
                ..._n,//es6方法,对象的集合
                num
            }
        })
    },
}
  • 创建一个加入购物车的空数组added
  • 给添加按钮注册事件,通过mapAction把方法映射出去,
  • 在vuex中通过action方法对添加按钮做异步数据操作,commit来触发添加事件add
  • 在vuex中的mutations中,对添加购物车add方法做操作
  • 添加完购物车以后,用一个计算属性cartProduct去接收添加的数据,向外输出数据,到list组件总通过mapGetters接收

** 以此方法类推删除与总和与总量 **

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值