Vue(小案例_vue+axios仿手机app)_Vuex优化购物车功能

一、前言                                                                   

        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: ''
})

　　（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