一、前言
1、用vuex实现加入购物车操作
2、购物车详情页面
3、点击删除按钮，删除购物详情页面里的对应商品
二、主要内容
1、用vuex加入购物车
（1）在src目录下创建store.js,
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//vuex五大将
state:{
num:1//小球的数量默认为1
}, getters:{
getShopNum(state){
return state.num;
}
}, mutations:{
addShopNum(state,num){//增加小球数量
state.num +=num;
}, changeShopNum(state,num){//改变小球数量
state.num = num;
}
}, actions:{
addShopNumByAction({commit},num){
commit('addShopNum',num);
}, changeShopNum({commit}, num){
commit('changeShopNum',num)
}
} })
（2）在main.js入口文件中挂载，并且导入
import store from './store.js' /* eslint-disableo-new */
new Vue({
el: '#app',
router,
store,//一定要导入
components: { App },
template: '<App/>'
})
（3）在app.vue(底部导航组件)中用computed监听这个pickNum
computed:{
pickNum(){
return this.$store.getters.getShopNum
}
}
（4）在点击“加入购物车”那个组件,
afterEnter(){
this.isExist=false; //显示出来之后执行这个，又将小球隐藏
/* 不用这个$bus
this.$bus.$emit('sendPickNum',this.pickNum);*/
//用vuex, 触发action,
this.$store.dispatch('addShopNumByAction',this.pickNum);
//当触发了上面的事件之后，
GoodsTool.add({
id:this.goodsInfo.id,
num:this.$store.getters.getShopNum
})
},
2、购物车详情页面（上面点击+++，下面也要变化）
（1）在购物车详情页面，每次点加，减的时候让他去触发action
methods:{
addNum(shop){//每次点击都接受到当前的对象
shop.num++; //这里的值虽然加上了，但是，数据并没有响应上去，是因为created是一开始就加载的，后来点击修改了num的值，但是没有 响应视图
this.$store.dispatch('addShopNumByAction',1)//触发action
console.log(shop)
},
substract(shop){
if(shop.num==1){
return;
}
shop.num--;
this.$store.dispatch('addShopNumByAction',-1)//触发action
}
}
（2）要让底部导航栏里面的数量随着点击而发生变化
created(){
//当你的组件一创建好了后就挂载这个bus公交车，$on这个事件监听
/* this.$bus.$on(`sendPickNum`, (data)=>{
this.pickNum=this.pickNum + data;
}),
this.pickNum=GoodsTool.getTotalCount();*/
//触发action里面的changShop方法，并且将当前的总数量传给他
this.$store.dispatch('changeShopNum',GoodsTool.getTotalCount())
}
3、点击删除按钮，删除购物详情页面里的对应商品
del(shop,index){//将当前的对象，和index传进来
this.shopCart.splice(index,1)//数组中的当前对象
delete GoodsTool[shop.id]
GoodsTool.removeGoods(shop.id)
let num = shop.um;
this.$store.dispatch('addShopNumByAction',-num)
}
4.通信的组件如下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
num:1//小球的数量默认为1
}, getters:{
getShopNum(state){
return state.num;
}
}, mutations:{
addShopNum(state,num){
state +=num;
}, changeShopNum(state,num){
state.num = num;
}
}, actions:{
addShopNumByAction({commit},num){
commit('addShopNum',num);
}, changeShopNum({commit}, num){
commit('changeShopNum',num)
}
} })
store.js
let obj={};
//这里需要存储数据
//{商品的id, 商品的数量}
//保存商品
obj.saveGoods = function(goodsList){
window.localStorage.setItem('goodsList',JSON.stringify(goodsList))
}
//获取商品的值,没有值传一个空对象
obj.getGoodsList = function(){
return JSON.parse(window.localStorage.getItem('goodsList'|| '{}'))
}
//增加商品
obj.add = function(goods){
let goodsList = this.getGoodsList()//获取到storage里面的对象
if(goodsList[goods.id]){
//goods.id是商品的数量，对应有值的话就追加
goodsList[goods.id] = goodsList[goods.id] + goods.num;
}else{
goodsList[goods.id]=goods.num;
}
//传进来之后还需要保存
this.saveGoods(goodsList);
}
//获取购物车的总数量
obj.getTotalCount = function(){
let goodsList = this.getGoodsList();
let values = Object.values(goodsList);//Object.values返回的是一个数组，里面对应着每一个key的value
let sum = 0;
values.forEach(val => sum = sum +val);
return sum;
}
//删除
obj.removeGoods=function(id){
let goodsList = this.getGoodsList();
delete goodsList[id];
return this.saveGoods(goodsList)
}
export default obj;
GoodsTool.js
<template>
<div>
<go-back-header title="商品详情"></go-back-header>
<div class="outer-swiper">
<div class="swiper">
我真的是轮播图
</div>
</div>
<div class="product-desc">
<ul>
<li><span class="product-desc-span">
商品标题
</span></li>
<li class="price-li">市场价：
<s>￥{{goodsInfo.market_price}}</s> 销售价：<span>￥{{goodsInfo.sell_price}}</span></li>
<li class="number-li">购买数量：<span @click='substract'>-</span><span>{{pickNum}}</span><span @click='add'>+</span></li>
<li>
<mt-button type="primary">立即购买</mt-button>
<mt-button type="danger" size='small' @click='ballHandler'>加入购物车</mt-button>
</li>
</ul>
</div>
<transition name='ball' @after-enter='afterEnter'>
<div class="ball" v-if="isExist"></div>
</transition>
<!--<div class="ball" v-if='isExist'></div>-->
<div class="product-props">
<ul>
<li>商品参数</li>
<li>商品货号：{{goodsInfo.goods_no}}</li>
<li>库存情况：{{goodsInfo.stock_quantity}}件</li>
<li>上架时间：{{goodsInfo.add_time}}</li>
</ul>
</div>
<div class="product-info">
<ul>
<li>
<mt-button type="primary" size="large" plain @click.native='showShopInfo()'>图文介绍</mt-button>
</li>
<li>
<mt-button type="danger" size="large" plain @click.native=''>商品评论</mt-button>
</li>
</ul>
</div>
</div>
</template>
<script>
import GoodsTool from './GoodsTool.js'
export default{
name:'GoodsDetail',
data(){
return{
url:`getthumImages/${this.$route.params.id}`,
goodsInfo:{},//当前购物车的信息，里面有id
pickNum:1 ,
isExist:false //让小球默认是隐藏的状态，
}
}, methods:{ afterEnter(){
this.isExist=false; //显示出来之后执行这个，又将小球隐藏 /* 不用这个$bus
this.$bus.$emit('sendPickNum',this.pickNum);*/ //用vuex, 触发action,
this.$store.dispatch('addShopNumByAction',this.pickNum);
//当触发了上面的事件之后，
GoodsTool.add({
id:this.goodsInfo.id,
num:this.$store.getters.getShopNum
})
}, //点击加入购物车执行这个方法，然后让小球显示出来
ballHandler(){ this.isExist=true;
// this.$bus.$emit('sendPickNum',this.pickNum); //将当前的pickNum传过去，但是这个不能加在这里，否者一点击“加入购物车就传
}, add(){
//如果当前的数小于库存数，就让他做加
if(this.pickNum < this.goodsInfo.stock_quantity){
this.pickNum++;
} }, substract(){
if(this.pickNum ===1){ //减法的时候最少为1，当此时值为1的时候不做操作
return;
} this.pickNum--;
}, showShopInfo(){ //通过动态路由进行路由跳转
this.$router.push({
name:"photo.info",
query:{
id:this.$route.params.id
}
})
}, shopComment(){
this.$router.push({
name:'good.comment',
query:{
id:this.$route.params.id
}
})
} }, created(){
//每个商品都只有一个对应的id,
this.$axios.get(`goods/getinfo${this.$route.params.id}`)
.then(res=>{
this.goodsInfo = res.data.message[0]
})
.catch(err=>{
console.log('商品详情异常',err)
}); this.pickNum = GoodsTool.getTotalCount();//获取购物的所有总数 }
}
</script>
<style scoped>
.ball-enter-active {
/*给1s的时间让小球进入动画效果*/
animation: bounce-in 1s;
} .bass-leave{
/*元素进入以后，透明度0，整个动画都是0*/
/*元素离开默认是1，所以会闪一下，设置为0*/
opacity: 0; } @keyframes bounce-in {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(140px, -50px, 0);
}
75% {
transform: translate3d(160px, 0px, 0);
}
100% {
transform: translate3d(140px, 300px, 0);
}
} .swiper {
border: 1px solid rgba(0, 0, 0, 0.2);
margin: 8px;
width: 95%;
border-radius: 15px;
overflow: hidden;
} .outer-swiper,
.product-desc,
.product-props,
.product-info {
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.2);
margin: 3px;
} /*请ulpadding*/ .outer-swiper ul,
.product-desc ul,
.product-props ul,
.product-info ul {
padding: 0;
} .product-desc ul li,
.product-props ul li,
.product-info ul li {
list-style: none;
font-size: 15px;
color: rgba(0, 0, 0, 0.5);
margin-top: 8px;
} .product-desc ul >:nth-child(1) span {
color: blue;
font-size: 22px;
font-weight: bold;
} .product-desc ul >:nth-child(1) {
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
} .product-desc ul,
.product-info ul,
.product-props ul {
padding-left: 10px;
} .price-li span {
color: red;
font-size: 25px;
} .price-li s {
margin-right: 16px;
} /*加减*/ .number-li span {
display: inline-block;
border: 2px solid rgba(0, 0, 0, 0.1);
width: 25px;
} /*商品参数*/ .product-props ul >:nth-child(1) {
text-align: left;
} .product-props ul:not(:nth-child(1)) {
margin-left: 40px;
} .product-info ul {
margin-bottom: 70px;
padding: 0 5;
} .number-li span {
text-align: center;
} .number-li >:nth-child(2) {
width: 40px;
} .ball {
border-radius: 50%;
background-color: red;
width: 24px;
height: 24px;
position: absolute;
top: 440px;
left: 120px;
display: inline-block;
z-index: 9999;
}
</style>
GoodsDetail.vue
<template>
<div id='app'>
<!--顶部-->
<mt-header title="信息管理系统" fixed>
<router-link to="/" slot="left">
<mt-button icon="back">返回</mt-button>
</router-link>
<mt-button icon="more" slot="right"></mt-button>
</mt-header> <!--底部-->
<div class="tabBar">
<ul>
<li v-for="(tab, index) in tabs">
<router-link :to="tab.routerName">
<img :src="tab.imgSrc">
<!--小球-->
<mt-badge size='small' color="#FC0107" v-if='index===2'>{{pickNum}}</mt-badge>
<p>{{tab.title}}</p>
</router-link>
</li>
</ul> </div>
<router-view></router-view> </div> </template> <script>
import index from './assets/index.png'
import vip from './assets/vip.png'
import shopcart from './assets/shopcart.png'
import search from './assets/search.png' let tabs = [
{id:1, title:"首页", imgSrc:index, routerName:{name:'home'}},
{id:2, title:"会员", imgSrc:vip, routerName:{name:'vip'}},
{id:3, title:"购物车", imgSrc:shopcart, routerName:{name:'cart'}},
{id:4, title:"查找", imgSrc:search, routerName:{name:'search'}} ] import GoodsTool from './GoodsTool.js'
export default { name: 'App',
data(){
return { tabs:tabs,
//pickNum:0,//底部栏小球 }
}, watch:{
selected:function(newV,oldV){ console.log(newV);
console.log(oldV);
console.log(this.selected);//id绑定的id
this.$router.push({name:this.selected}); }, computed:{
pickNum(){
return this.$store.getters.getShopNum
}
} created(){
//当你的组件一创建好了后就挂载这个bus公交车，$on这个事件监听
/* this.$bus.$on(`sendPickNum`, (data)=>{
this.pickNum=this.pickNum + data;
}), this.pickNum=GoodsTool.getTotalCount();*/
this.$store.dispatch('changeShopNum',GoodsTool.getTotalCount()) }
}
}
</script> <style scoped>
.tabBar{
width: 100%;
height: 55px;
background-color: #ccc;
position: absolute;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;/*做一像素渐变线*/
background-position: top left;
background-color: #fafafa;
} .tabBar ul{
width: 100%;
overflow: hidden;
} .tabBar ul li{
float: left;
width: 25%;
height: 55px;
text-align: center;
} .tabBar ul li a{
display: inline-block;
width: 100%;
height: 100%;
padding-top: 10px; }
.tabBar ul li a.link-active{
background-color: pink;
position: relative;
}
.tabBar ul li a img{
width: 25px;
height: 25px;
}
.tabBar ul li a p{
font-size: 12px;
} /*重写一下小球的颜色*/
.mint-bage.is-size-small{
position: absolute;
top: 0;
right: 10px;
}
</style>
App.vue
<template>
<div>
<div class="pay-detail">
<ul>
<li class="p-list" v-for="(shop, index) in shopCart">
<mt-switch></mt-switch>
<img src="">
<div class="pay-calc">
<p>{{shop.title}}</p>
<div class="calc">
<span>￥777</span>
<span @click="substract(shop)">-</span>
<span>{{shop.num}}</span>
<span @click="addNum(shop)">+</span>
<a href="javascript:;">删除</a>
</div>
</div>
</li>
</ul>
</div>
<div class="show-price">
<div class="show-1">
<p>总计(不含运费):</p>
<span>已经选择商品1件，总价￥888元</span>
</div>
<div class="show-2">
<mt-button type="danger" size="large">去结算</mt-button>
</div>
</div>
</div>
</template>
<script>
import GoodTool from '@/GoodsTool.js'
export default {
name:'Cart',
data(){
return{
shopCart:[] }
},
methods:{
addNum(shop){//每次点击都接受到当前的对象
shop.num++; //这里的值虽然加上了，但是，数据并没有响应上去，是因为created是一开始就加载的，后来点击修改了num的值，但是没有 响应视图
this.$store.dispatch('addShopNumByAction',1)
console.log(shop)
},
substract(shop){
if(shop.num==1){
return;
} shop.num--;
this.$store.dispatch('addShopNumByAction',-1) }, del(shop,index){//将当前的对象，和index传进来
this.shopCart.splice(index,1)//数组中的当前对象
delete GoodsTool[shop.id]
GoodsTool.removeGoods(shop.id) let num = shop.um;
this.$store.dispatch('addShopNumByAction',-num) } },
computed:{
payment(){
let total = 0;//定义总金额
let count =0;//定义总数量 this.shopCart.forEach((shop)=>{
if(shop.isSelected){
count = count+shop.num;
total = total + shop.num * shop.sell_price;
}
}) return {
total, count
}
}
}, created(){
let goodsList = GoodsTool.getGoodsList();//{"88":5,"99":4} 第一个数商品id 第二个是商品数量
let ids = Object.key(goodsList).join(',');//Object.key()获取key值 [88,99]
if(ids){
this.$axios.get(`goods/getshopcarlist${ids}`)
.then(res=>{ this.shopCart=res.data.message;//返回的是一个数组
//给数组元素添加属性
for(var i=0; i<this.shopCart.length;i++){
let shop=this.shopCart[i];//获取到当前的对象
let num = goodsList[shop.id];//根据当前对象的id查找到对应的购物车数量 if(num){
shop.num = num; this.$set(shop, 'num', num);//自己给这个数据进行双向数据绑定
this.$set(shop,'isSelected',true); } }
})
}
}
}
</script>
<style scoped>
.pay-detail ul li {
list-style: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
margin-bottom: 3px;
} .pay-detail ul {
padding-left: 5px;
margin-top: 5px;
} .pay-detail ul li img {
width: 80px;
height: 80px;
display: inline-block;
vertical-align: top;
margin-top: 10px;
} .pay-detail ul li >:nth-child(1),
.pay-detail ul li >:nth-child(3) {
display: inline-block;
} .pay-calc p {
display: inline-block;
width: 250px;
overflow: hidden;
color: blue;
font-size: 15px;
margin-bottom: 10px;
} .pay-detail ul li >:nth-child(1) {
line-height: 80px;
} .calc:nth-child(1) {
color: red;
font-size: 20px;
} .calc span:not(:nth-child(1)) {
border: 1px solid rgba(0, 0, 0, 0.3);
display: inline-block;
width: 20px;
text-align: center;
} .calc a {
margin-left: 20px;
} .show-1,
.show-2 {
display: inline-block;
} .show-1,
.show-2 {
margin-left: 30px;
} .show-price {
background-color: rgba(0, 0, 0, 0.2);
}
</style>
Cart.vue
三、总结