vuex——做简单的购物车功能
购物车组件
<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——做简单的购物车功能的更多相关文章
- jQuery使用cookie与json简单实现购物车功能
本文实例讲述了jQuery使用cookie与json简单实现购物车的方法.分享给大家供大家参考,具体如下: 1.生成一个cookie 用来存储商品的id String类型 2.添加商品id的时候 把 ...
- JavaScript做简单的购物车效果(增、删、改、查、克隆)
比如有时候遇到下面这种情况,点击加入购物车,然后在上方的购物车中动态的添加商品以及商品的信息,我们就可以通过JavaScript实现简单的这些操作. 首先我们需要在html文档中,通过css对页面的布 ...
- 利用Vue实现一个简单的购物车功能
开始学习Vue的小白,dalao多多指正 想要实现下面这个界面,包含总价计算.数量增加和移除功能 话不多说代码如下 <!DOCTYPE html> <html> <hea ...
- vue实现简单的购物车功能
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- Python入门之实现简单的购物车功能
Talk is cheap,Let's do this! product_list = [ ['Iphone7 Plus', 6500], ['Iphone8 ', 8200], ['MacBook ...
- vue2.0实现购物车功能
购物车功能是一件比较繁琐的事情,逻辑功能太多,今天就用vue2.0实现一个简单的购物车功能,数据都本地自己写的假数据 功能列表: 1.全选和单选结算 2.减少和增加数量 3.商品的删除 界面搭建以及布 ...
- php 实现简单购物车功能(2)
上一篇的时候只是写了简单的加入购物车功能,购物车中产品的删除.提交订单后,库存的减少 以及客户账户的余额都没有完善, 这一篇是接着完善上一篇的,上一篇写到了购物车中删除的功能了,为了使删除的代码少敲一 ...
- react做的简单的购物车
###第一步 :首先电脑上已经安装react的脚手架 cnpm install create-react-app -g ###第二步 :创建项目 creact-react-app 项目 ...
- 用vuex实现购物车功能
效果图 展示目录结构 product组件(纯静态代码) cart组件(纯静态代码) info组件(纯静态代码) 完成以上的三个组件,现在要开始调用这些组件,在App.vue中调用 如果你的姿势正确的话 ...
随机推荐
- 32. Springboot 系列(八)动态Banner与图片转字符图案的手动实现
使用过 Springboot 的对上面这个图案肯定不会陌生,Springboot 启动的同时会打印上面的图案,并带有版本号.查看官方文档可以找到关于 banner 的描述 The banner tha ...
- sql 左右连接 on 之后的and 和where的区别
- luogu P3238 [HNOI2014]道路堵塞
传送门 这什么题啊,乱搞就算了,不知道SPFA已经死了吗 不对那个时候好像还没死 暴力就是删掉边后跑Dijkstra SPFA 然后稍微分析一下,可以发现题目中要求的不经过最短路某条边的路径,一定是先 ...
- es6解构赋值的高级技巧
1. 解构嵌套的对象,注意,这时p是模式,不是变量,因此不会被赋值.如果p也要作为变量赋值,可以写成下面这样. let obj = { p: [ 'Hello', { y: 'World' } ] } ...
- JavaScript中Float类型保留两位小数
JavaScript中Float类型保留两位小数 核心方法: num:要操作的数字 size:要保留的位数 parseFloat(num).toFixed(size); 实现代码如下:var ...
- 课程9:《hibernate框架开发2016版视频》视频目录
\第1天\视频\01_今天内容介绍.avi; \第1天\视频\02_web内容回顾.avi; \第1天\视频\03_hibernate框架概述.avi; \第1天\视频\04_什么是orm思想.avi ...
- Day17总结
1:登录注册案例(理解) 2:Set集合(理解) (1)Set集合的特点 无序,唯一 (2)HashSet集合(掌握) A:底层数据结构是哈希表(是一个元素为链表的数组) B:哈希表底层依赖两个方法: ...
- VGGNet学习——实践
0 - DataSet http://www.csc.kth.se/~att/Site/Animals.html 1 - Code 1.1 - Import Packages import tenso ...
- XLMHttpRequest对象的status属性,readyState属性以及onreadystatechange事件
注:XLMHttpRequest简写为XHR 一.HTTP请求过程 (1)建立TCP链接 (2)web浏览器向web服务器发送请求命令 (3)web浏览器发送请求头信息 (4)web服务器应答 (5) ...
- java基础梳理--朝花夕拾(一)
简介: Java是一种撰写跨平台应用软件的面向对象语言,1995年由Sun Microsystems公司推出. 2009年04月20日,甲骨文74亿美元收购Sun,取得java的版权. 2011年7月 ...