vuex实现购物车功能,vuejs购物车
这篇文章主要为大家详细介绍了某视频剪辑软件实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现购物车功能的具体代码，供大家参考，具体内容如下
如图，需要有加入购物车的标识
思路如下：点击购物车按钮时将商品的id，title，imgUrl(海报图),标志（标识符，标志非常重要，为以后复选框判断是否选中做参考)变成一个数组形式，推车，传入状态管理
模板
差异
货车-货物-行动
van-goods-action-icon icon= chat-o text=客服@click=onClickIcon /
货车-货物-动作-图标icon=cart-o text=购物车@click=onClickIcon /
货车-货物-动作-按钮
类型=警告
text=加入购物车
@click=onClickButton
/
货车-货物-动作-按钮
类型=危险
text=立即购买
@click=onClickButton
/
/凡-商品-行动
/div
/模板
脚本
从"万特"导入{ Toast }；
从"万特"导入{ GoodsAction，GoodsActionIcon，GoodsActionButton }。
导出默认值{
名称："选项卡",
data(){
返回{
}
},
道具：{
id:字符串，
当前：字符串，
标题：字符串，
imgUrl:字符串
},
组件：{
【Toast.name】:吐司，
【动作不错。姓名]:好行动，
[GoodsActionIcon。name]:goodactionicon，
[GoodsActionButton。name]:GoodsActionButton
},
方法：{
onClickIcon() {
吐司(点击图标);
},
onClickButton() {
var cart={id:this.id，current:this.current，num:1，title:this.title，imgUrl:this.imgUrl，flag:true}
这个store.commit(addCart ，Cart)
吐司(已加入购物车);
},
},
}
/脚本
风格
/风格
2.vuex如下
从“vue”导入某视频剪辑软件
从" vuex "导入状态管理
从导入突变 mutations.js
Vue.use(Vuex)
导出默认的新Vuex .商店({
状态：{
购物车：[],
钱：0,
allchecked:true
},
突变，
})
导出默认值{,
//判断是否已经加入过购物车，如果加入过，则该产品数量加一，若没有加入过，将产品加入手推车中
添加购物车(状态，数据){
for(var I=0；istate。推车。长度；i ){
if(state.cart[i]).id==data.id){
state.cart[i].数字=数据。数字
返回
}
}
state.cart.push数据)
},
//该函数为数字一
addCartNum(状态，索引){
state.cart[index].数字
},
//该函数为数字-1
剑齿虎(状态，索引){
if(state.cart[index].num==1){ return；}
state.cart[index].数量-
},
}
3.购物车
思路如下：若没有产品则显示无产品，若有产品在购物车里，则可进行增删加减
模板
div class=bg
div class=bgCart v-if=isGood
div class=cartAd
h3
购物车
/h3
div v-if=select
div class= admin @ click= on admin 管理/div
/div
div v-if=！选择
div class=admin @click=onOk 完成/div
/div
/div
van-checkbox-group v-model= result ref= checkbox group
div class=cart v-for=(item，index) in cartList :key=index
范-复选框：名称=项目。id class= checkbox checked-color= red v-model= item。标志 @ click=选择更改(项目。 id，item)
/凡-复选框
div class=box
img class= img :src=基本URL项目。imgurl /
div class= wraper
div class= title"{ item。标题} }/div
div class=容器
div class= money @{ { item。当前} }/分区
差异
建@click=建（索引)
jianAdj -/span
/span
span{{item.num}}/span
span class= Jia @ click= add(index)
jiaAdj /span
/span
/div
/div
/div
/div
/div
/凡-复选框-组
div class=order v-if=select
van-submit-bar:price= get all button-text=提交订单
van-checkbox v-model= all checked checked-color= red @ click= all order 全选/取消/凡-复选框
/凡-提交-栏
/div
div class=order v-if=！选择
van-submit-bar:price= get all button-text=删除@submit=del
van-checkbox v-model= all checked checked-color= red @ click= all order 全选/取消/凡-复选框
/凡-提交-栏
/div
/div
div v-if=！好不好
h3
购物车
/h3
img src=./././static/img/cart.jpg/
添加
您还没有添加任何产品哦
/span
van-button round type=危险去逛逛/货车按钮
/div
底部/底部
/div
/模板
脚本
导入{
复选框，
复选框组
}来自vant ；
导入{
提交栏
}来自vant ；
导入{
纽扣
}来自vant ；
导出默认值{
名称："购物车",
data() {
返回{
结果：[],
目录列表：[],
选择：真，
钱：0,
结果：[],
baseUrl: this.common.baseUrl，
全部选中：这个. store.state.allchecked，
isGood:没错
}
},
组件：{
[SubmitBar.name]: SubmitBar，
[Button.name]:按钮，
[Checkbox.name]:复选框，
[复选框组。名称]:复选框组，
bottom: ()=import( ./组件/底部。vue’)
},
计算值：{
getAll() {
定义变量货币=0
这个100美元商店。状态。推车。foreach(item={
if (item.flag) {
货币=(item.num * item.current) * 100
}
})
还钱
}
},
方法：{
//选择单个复选框（非常重要)
//由于我进来是使复选框全选，则在第一次点击的时候使得标志=假
选择更改(我，项目){
if (this.result.indexOf(i) -1) {
var arrs=this。结果。过滤器(功能(项目){
退货！=I；
});
this.result=arrs
item.flag=false
}否则{
这个。结果。推(一)；
item.flag=true
}
//判断单个和全部，若单个全选，则这个10.25 $ store . state . all checked为真实的
if (this.result.length this .$store.state.cart.length) {
这个100美元商店。状态。全部勾选=假；
this.allchecked=this .$ store。状态。全部勾选；
}否则{
这个100美元商店。状态。全部选中=真；
this.allchecked=this .$ store。状态。全部勾选；
}
},
//全选状态
allOrder() {
//如果选择状态为选中的时候，设置这个. store.state.allchecked=false变成未选中
如果（这个. store.state.allchecked) {
这个100美元商店。状态。推车。foreach(item={
item.flag=false
})
这个。结果=[]；
这个100美元商店。状态。全部勾选=假；
this.allchecked=this .$ store。状态。全部勾选；
}否则{
这个100美元商店。状态。推车。foreach(item={
item.flag=true
如果(这个。结果。(项目的索引。id)0){
这个。结果。推(项。id)；
}
})
这个100美元商店。状态。全部选中=真；
this.allchecked=this .$ store。状态。全部勾选；
}
},
//数字
添加（索引){
这个store.commit(addCartNum ，index)
},
//数字减
简（索引){
这个store.commit(jianCartNum ，index)
},
//点击管理
onAdmin() {
this.select=false
},
//点击完成
onOk() {
this.select=true
if(this.result.length==0){
console.log(1)
this.isGood=false
}否则{
console.log(this.result)
}
},
//删除
del() {
if (this.result.length==this .$store.state.cart.length) {
这个. store.state.cart.splice(0，this.result.length)
this.result.splice(0，this.result.length)
}否则{
这个100美元商店。状态。推车。foreach(item={
if (item.flag) {
这个store.state.cart.splice(item，1)
结果拼接(项目id，1)
}
})
}
}
},
已创建(){
this.cartList=this .$store.state。购物车
如果（这个. store.state.allchecked) {
for(var I=0；我这个100美元商店。状态。推车。长度；i ) {
这个. result.push(这个store.state.cart[i]。id)
}
}
if(this.result.length==0){
this.isGood=false
}
}
}
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。