这个小demo具有添加商品进购物车 、增加购物车内商品的数量、减少购物车内商品的数量、计算一类商品的总价、以及计算所有商品的总价

首先看目录结构

因为我们的Tab.vue  Car.vue 以及Carinfo.vue中的数据有关联   所以用到了vuex

在store文件夹下的index.js中```

import Vue from 'vue';
import Vuex from 'vuex';
import logger from 'vuex/dist/logger';
Vue.use(Vuex); // 状态
//state里面存放的数据是cartList 这个cartList数据manuations和getter都能用到
let state = {cartList:[]};
import mutations from './mutations.js';
import getters from './getters.js' export default new Vuex.Store({
  state,
  mutations,
  getters,
  strict:true,
  plugins:[logger()]
});
```

在main.js里面引入store文件夹下的index.js

main.js文件内容

import Vue from 'vue'
import App from './App'
import router from './router' //购物车
import store from './store' /* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
store
})

在store文件夹下的manutations-types.js文件

//加入购物车的功能

//添加购物车(添加的商品)
export const ADD_CART='ADD_CART';
//删除购物车(要求传入id)
export const REMOVE_CART='REMOVE_CART';
//更改商品数量({id,1/-1})
export const CHANGE_COUNT='CHANGE_COUNT';
//清空购物车
export const CLEAR_CART='CLEAR_CART';

List.vue组件

<template>
<div>
<MHeader>列表页</MHeader>
<div class="content" ref="scroll" @scroll="loadMore">
<ul>
<router-link v-for="(book,index) in books" :key="index" :to="{name:'detail',params:{bid:book.bookId}}" tag="li">
<img v-lazy="book.bookCover">
<div>
<h4>{{book.bookName}}</h4>
<p>{{book.bookInfo}}</p>
<b>{{book.bookPrice}}</b>
<div class="btn-list">
<button @click.stop="remove(book.bookId)">删除</button>
<button @click.stop="addCart(book)">添加进购物车</button>
</div> </div>
</router-link>
</ul>
<div @click="More" class="More">加载更多</div>
</div>
</div>
</template> <script> import * as Types from '../store/mutations-types.js' export default { methods:{ //点击添加进购物车按钮 触发此方法 发布订阅 添加指定图书进购物车Car.vue
addCart(book){
this.$store.commit(Types.ADD_CART,book)
}
} } </script>

在store文件夹下的manutations.js文件内容  添加指定商品进购物车

import * as Types from './mutations-types.js';
const mutations={
//添加商品进购物车
[Types.ADD_CART](state,book) {
//book是添加的一本书 如果有这本书 累加的是数量 如果没有那么数量为1 放到cartList中
//查找cartList里面有没有添加进来的那本书
let product=state.cartList.find(item=>item.bookId===book.bookId);
//如果有的话
if(product) {
product.bookCount+=1;
//还要更新掉原数组 原数组里面有book内容和book 否则不会刷新
state.cartList=[...state.cartList];
}else {
book.bookCount=1;
//用新数组替换到老数组
state.cartList=[...state.cartList,book]
}
}
} export default mutations;

Car.vue组件

<template>
<div>
<MHeader>购物车</MHeader>
<ul class="content">
<li v-for="(l,index) in cartList" :key="index">
<img :src="l.bookCover" alt="" style="width:120px;height:140px">
<div class="right">
<h3>{{l.bookName}}</h3>
<button @click="delOneCart(l)">-</button><span>{{l.bookCount}}</span><button @click="addCart(l)">+</button>
      
      //计算此类商品的价钱
<p>小计 :¥{{l.bookPrice*l.bookCount | numFilter}}</p>
<button @click="delCart(l)">删除</button>
</div>
</li>
</ul>
<Carinfo></Carinfo>
</div>
</template>
<script>
import MHeader from '../base/MHeader.vue';
import Carinfo from './Carinfo.vue'; import * as Types from '../store/mutations-types.js' // 辅助函数 语法糖
import {mapState,mapGetters} from 'vuex';
export default {
data(){
return {msg: 'hello'}
},
created(){
},
filters:{//过滤器
numFilter(value) {
//截取当前数据到小数点后两位
let realVal=Number(value).toFixed(2);
return Number(realVal);
}
},
methods: {
addCart(l){//当触发此事件是同样也是提交给manutations
this.$store.commit(Types.ADD_CART,l)
},
delOneCart(l){
this.$store.commit(Types.CHANGE_COUNT,l);
},
delCart(l){
this.$store.commit(Types.REMOVE_CART,l);
}
},
computed: {
...mapGetters(['count','totolPrice']),
...mapState(['cartList'])
/*cartList(){
return this.$store.state.cartList
}*/
},
components: {MHeader,Carinfo}
}

manutaions.js

import * as Types from './mutations-types.js';
const mutations={
[Types.ADD_CART](state,book) {
//book是添加的一本书 如果有这本书 累加的是数量 如果没有那么数量为1 放到cartList中
//查找cartList里面有没有添加进来的那本书
let product=state.cartList.find(item=>item.bookId===book.bookId);
//如果有的话
if(product) {
product.bookCount+=1;
//还要更新掉原数组 否则不会刷新
state.cartList=[...state.cartList];
}else {
book.bookCount=1;
//用新数组替换到老数组
state.cartList=[...state.cartList,book]
}
console.log('state.cartList',state.cartList);
},
[Types.CHANGE_COUNT](state,book) {
let product=state.cartList.find(item=>item.bookId===book.bookId);
if(product) {
product.bookCount-=1;
//还要更新掉原数组 否则不会刷新
state.cartList=[...state.cartList];
}
},
[Types.REMOVE_CART](state,book){
state.cartList.forEach((item,i) => {
if(item.bookId===book.bookId){
state.cartList.splice(i,1);
}
});
state.cartList=[...state.cartList];
},
[Types.CLEAR_CART](state){
state.cartList=[];
}
}
export default mutations;
 

Carinfo.vue

<template>
<div class="item-wrapper">
<div class='item'>总数:
<strong>{{count}}</strong>
</div>
<div class='item'>总价:
¥<strong>{{totalPrice|numFilter}}</strong>
</div>
<button class="item btn btn-danger" @click="clearAll">清空购物车</button>
</div>
</template>
<script> import * as Types from '../store/mutations-types.js' //两个辅助函数
import {mapState,mapGetters} from 'vuex'; export default {
data(){
return { }
},
filters:{
numFilter(value) {
//截取当前数据到小数点后两位
let realVal=Number(value).toFixed(2);
return Number(realVal);
}
},
methods:{
clearAll(){
this.$store.commit(Types.CLEAR_CART);
}
},
computed:{
...mapGetters(['count']),
...mapGetters(['totalPrice'])
}
}

Getter.js

let getters={
//求购物车中所有商品的总数量
//迭代相加 reduce
count:(state)=>state.cartList.reduce((prev,next)=>prev+next.bookCount,0),
totalPrice:(state)=>state.cartList.reduce((prev,next)=>prev+next.bookCount*next.bookPrice,0)
} export default getters;

用Vue来实现购物车功能(二)的更多相关文章

  1. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

  2. vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

  3. 用vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

  4. vue 入门 ------简单购物车功能实现(全选,数量加减,价格加减)

    简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...

  5. vue实战记录(二)- vue实现购物车功能之创建vue实例

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(二) GitHub:sue ...

  6. vue实战记录(五)- vue实现购物车功能之商品总金额计算和单选全选删除功能

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...

  7. vue实战记录(三)- vue实现购物车功能之渲染商品列表

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(三) GitHub:sue ...

  8. vue实战记录(一)- vue实现购物车功能之前提准备

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(一) GitHub:sue ...

  9. vue实战记录(六)- vue实现购物车功能之地址列表选配

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(六) GitHub:sue ...

随机推荐

  1. spring boot 枚举使用的坑3

    上一篇说到spring boot 使用jackson在枚举enum序列化和反序列化的问题, 再来说说在JPA中实体entity使用枚举的问题. 还是这个枚举: @Getter @AllArgsCons ...

  2. spring boot 枚举使用的坑

    java 枚举的功能挺多,但是坑更多,使用的时候要注意.如下面这个枚举. @Getter @AllArgsConstructor public enum EnumExpenseType impleme ...

  3. 关于websocket 在生产环境中遇到的问题 及 解决办法

    一  生产环境说明 1) tornado 4.2 2) Tornado-MySQL 3) supervisor 3.0b2 4) protobuf 2.6.1 5) python 2.7.6 6) n ...

  4. js 全世界最短的IE浏览器判断代码

    var ie = !+"\v1"; 仅仅需要7bytes!参见这篇文章,<32 bytes, ehr ... 9, ehr ... 7!!! to know if your ...

  5. JavaScript的循环结构和经典题目

    一.JS中的循环结构 循环结构的执行步骤1.声明循环变量:2.判断循环条件;3.执行循环体操作:4.更新循环变量:5.然后循环执行2-4,直到条件不成立,跳出循环. while循环()中的表达式,运算 ...

  6. 百度网盘SVIP不限速Mac破解版(亲测可用)

    百度网盘SVIP不限速Mac破解版(亲测可用),按照教程一步一步来就可以了,链接如下: https://mac.orsoon.com/Mac/166358.html?id=ODY0MDA2Jl8mMT ...

  7. 204-基于Xilinx Virtex-6 XC6VLX240T 和TI DSP TMS320C6678的信号处理板

    基于Xilinx Virtex-6 XC6VLX240T 和TI DSP TMS320C6678的信号处理板 1.板卡概述  板卡由我公司自主研发,基于VPX架构,主体芯片为两片 TI DSP TMS ...

  8. 深度复数网络 Deep Complex Networks

    转自:https://www.jiqizhixin.com/articles/7b1646c4-f9ae-4d5f-aa38-a6e5b42ec475  (如有版权问题,请联系本人) 目前绝大多数深度 ...

  9. Codeforces 940 区间DP单调队列优化

    A #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) #def ...

  10. jvm 堆

    1.堆内存线程共享,在虚拟机启动时创建. 2.几乎所有的对象实例都在堆上分配:栈中存放基本数据类型和堆中对象的引用. GC回收 程序计数器.虚拟机栈.本地方法栈随线程而生,随线程而灭.栈中的栈帧随着方 ...