购物车组件

<template>
<div>
<h1>vuex-shopCart</h1>
<div class="shop-listbox">
<shop-list/>
</div>
<h2>已选商品</h2>
<div class="shop-cartbox">
<shop-cart/>
</div>
</div>
</template> <script> import shopList from "./shop-list";
import shopCart from './shop-cart'; export default{
name:'shop',
components:{
'shop-list':shopList,
'shop-cart':shopCart
} }
</script>

商品列表

<template>
<div class="shop-list">
<table>
<tr class="shop-listtitle">
<td>id</td>
<td>名称</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr v-for="item in shopList" class="shop-listinfo">
<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{mapActions} from "vuex";
export default{
name:'shopList',
data(){
return{ }
},
computed:{
shopList(){
return this.$store.getters.getShopList
}
},
methods:{
...mapActions(['addToCart'])
}
}
</script>
<style lang="less" scoped>
@import url('../../static/public.less');
</style>

选中商品列表

<template>
<div class="shop-list">
<table>
<tr class="shop-listtitle">
<td>id</td>
<td>名称</td>
<td>价格</td>
<td>数量</td>
<td>操作</td>
</tr>
<tr v-for="item in cartData" class="shop-listinfo">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.num}}</td>
<td><button class="shop-dele dele-btn" @click="deletShop(item)">删除</button></td>
</tr>
<tr v-if="cartData.length<=0">
<td colspan="5">暂无数据</td>
</tr>
<tr>
<td colspan="2">总数:{{totalNum}}</td>
<td colspan="2">总价格:{{totalPrice}}</td>
<td><button class="dele-cart dele-btn" @click="clearCart">清空购物车</button></td>
</tr>
</table>
</div>
</template> <script>
import {mapGetters,mapActions} from "vuex";
export default{
name:'shopCart',
data(){
return{ }
},
computed:{
...mapGetters({
cartData:'addShopList',
totalNum:'totalNum',
totalPrice:'totalPrice'
})
},
methods:{
...mapActions({
clearCart:'clearToCart',
deletShop:'deletToShop'
})
}
}
</script> <style lang="less" scoped>
@import url('../../static/public.less');
.dele-btn{
background-color: red !important;
}
.dele-btn:hover{
background-color: #bd0000 !important;
}
</style>

vuex 创建

npm install vuex --save,创建vuex文件夹,在文件夹中创建store.js,引入vuex;

import Vue from "vue";
import Vuex from 'vuex';
import cart from "./modules/cart"; Vue.use(Vuex); export default new Vuex.Store({
modules:{
cart
}
})

建立一个模块文件夹modules,里面创建创建当个store模块,然后默认输出,在store.js中引入;

const state = {
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:[]
} const getters ={
//获取商品列表
getShopList:state => state.shop_list,
//获取购物车列表
addShopList:state => {
return state.add.map(({id,num})=>{
let product = state.shop_list.find(n => n.id == id);
if(product){
return{
...product,
num
}
}
})
},
//获取总数量
totalNum:(state,getters) =>{
let total =0;
getters.addShopList.map(n=>{
total += n.num;
})
return total;
},
//计算总价格
totalPrice:(state,getters)=>{
let total=0;
getters.addShopList.map(n=>{
total += n.num*n.price
})
return total;
}, } const actions={
//加入购物车
addToCart({commit},product){
commit('addCart',{
id:product.id
})
},
//清空购物车
clearToCart({commit}){
commit('clearCart')
},
//删除单个物品
deletToShop({commit},product){
commit('deletShop',product)
}
} const mutations ={
//加入购物车
addCart(state,{id}){
let record = 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=[];
}
} export default{
state,
getters,
actions,
mutations
}

vuex——做简单的购物车功能的更多相关文章

  1. jQuery使用cookie与json简单实现购物车功能

    本文实例讲述了jQuery使用cookie与json简单实现购物车的方法.分享给大家供大家参考,具体如下: 1.生成一个cookie 用来存储商品的id  String类型 2.添加商品id的时候 把 ...

  2. JavaScript做简单的购物车效果(增、删、改、查、克隆)

    比如有时候遇到下面这种情况,点击加入购物车,然后在上方的购物车中动态的添加商品以及商品的信息,我们就可以通过JavaScript实现简单的这些操作. 首先我们需要在html文档中,通过css对页面的布 ...

  3. 利用Vue实现一个简单的购物车功能

    开始学习Vue的小白,dalao多多指正 想要实现下面这个界面,包含总价计算.数量增加和移除功能 话不多说代码如下 <!DOCTYPE html> <html> <hea ...

  4. vue实现简单的购物车功能

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  5. Python入门之实现简单的购物车功能

    Talk is cheap,Let's do this! product_list = [ ['Iphone7 Plus', 6500], ['Iphone8 ', 8200], ['MacBook ...

  6. vue2.0实现购物车功能

    购物车功能是一件比较繁琐的事情,逻辑功能太多,今天就用vue2.0实现一个简单的购物车功能,数据都本地自己写的假数据 功能列表: 1.全选和单选结算 2.减少和增加数量 3.商品的删除 界面搭建以及布 ...

  7. php 实现简单购物车功能(2)

    上一篇的时候只是写了简单的加入购物车功能,购物车中产品的删除.提交订单后,库存的减少 以及客户账户的余额都没有完善, 这一篇是接着完善上一篇的,上一篇写到了购物车中删除的功能了,为了使删除的代码少敲一 ...

  8. react做的简单的购物车

    ###第一步 :首先电脑上已经安装react的脚手架 cnpm  install    create-react-app   -g ###第二步 :创建项目 creact-react-app   项目 ...

  9. 用vuex实现购物车功能

    效果图 展示目录结构 product组件(纯静态代码) cart组件(纯静态代码) info组件(纯静态代码) 完成以上的三个组件,现在要开始调用这些组件,在App.vue中调用 如果你的姿势正确的话 ...

随机推荐

  1. 32. Springboot 系列(八)动态Banner与图片转字符图案的手动实现

    使用过 Springboot 的对上面这个图案肯定不会陌生,Springboot 启动的同时会打印上面的图案,并带有版本号.查看官方文档可以找到关于 banner 的描述 The banner tha ...

  2. sql 左右连接 on 之后的and 和where的区别

  3. luogu P3238 [HNOI2014]道路堵塞

    传送门 这什么题啊,乱搞就算了,不知道SPFA已经死了吗 不对那个时候好像还没死 暴力就是删掉边后跑Dijkstra SPFA 然后稍微分析一下,可以发现题目中要求的不经过最短路某条边的路径,一定是先 ...

  4. es6解构赋值的高级技巧

    1. 解构嵌套的对象,注意,这时p是模式,不是变量,因此不会被赋值.如果p也要作为变量赋值,可以写成下面这样. let obj = { p: [ 'Hello', { y: 'World' } ] } ...

  5. JavaScript中Float类型保留两位小数

    JavaScript中Float类型保留两位小数 核心方法: num:要操作的数字     size:要保留的位数 parseFloat(num).toFixed(size); 实现代码如下:var  ...

  6. 课程9:《hibernate框架开发2016版视频》视频目录

    \第1天\视频\01_今天内容介绍.avi; \第1天\视频\02_web内容回顾.avi; \第1天\视频\03_hibernate框架概述.avi; \第1天\视频\04_什么是orm思想.avi ...

  7. Day17总结

    1:登录注册案例(理解) 2:Set集合(理解) (1)Set集合的特点 无序,唯一 (2)HashSet集合(掌握) A:底层数据结构是哈希表(是一个元素为链表的数组) B:哈希表底层依赖两个方法: ...

  8. VGGNet学习——实践

    0 - DataSet http://www.csc.kth.se/~att/Site/Animals.html 1 - Code 1.1 - Import Packages import tenso ...

  9. XLMHttpRequest对象的status属性,readyState属性以及onreadystatechange事件

    注:XLMHttpRequest简写为XHR 一.HTTP请求过程 (1)建立TCP链接 (2)web浏览器向web服务器发送请求命令 (3)web浏览器发送请求头信息 (4)web服务器应答 (5) ...

  10. java基础梳理--朝花夕拾(一)

    简介: Java是一种撰写跨平台应用软件的面向对象语言,1995年由Sun Microsystems公司推出. 2009年04月20日,甲骨文74亿美元收购Sun,取得java的版权. 2011年7月 ...