用Vue来实现购物车功能（二）
这个小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;
