微信小程序(黑马优购:加入购物车)

1.配置Vuex

1).创建store.js目录

复制代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules:{}
})

export default store

2).pages.json中配置

复制代码

import store from '@/store/store.js'



const app = new Vue({
    ...App,
    ///挂载
    store
})

3).配置cart.js

复制代码

export default{
  namespaced: true,
  
  state: ()=> ({
    //购物车的数组，用来存储购物车中每个商品的信息对象
    //每个商品的信息对象，都包含如下6个属性
    //{goods_id,goods_name,goods_price,goods_count,goods_small_logo,goods_state}
    cart: []
  }),
  
  mutations: {
    
  },
  
  getters: {
    
  }
  
  
}

store.js中引入cart.js

复制代码

import Vue from 'vue'
import Vuex from 'vuex'
import moduleCart from '@/store/cart.js'


Vue.use(Vuex)

const store = new Vuex.Store({
  modules:{
    
    'm_cart': moduleCart
    
  }
})

export default store

2.把cart.js的cart数组到当前页面

复制代码

import { mapState } from 'vuex'
  
  
  export default {
    computed: {
        ...mapState('m_cart',['cart'])
    },

3.定义addToCart对象

cart.js

复制代码

export default{
  namespaced: true,
  
  state: ()=> ({
    //购物车的数组，用来存储购物车中每个商品的信息对象
    //每个商品的信息对象，都包含如下6个属性
    //{goods_id,goods_name,goods_price,goods_count,goods_small_logo,goods_state}
    cart: []
  }),
  
  mutations: {
    addToCart(state,goods){
      const findResult = state.cart.find(x => x.goods_id === goods.goods_id)
      
      if(!findResult){
        state.cart.push(goods)
      }else{
        findResult.goods_count++
      }
      
    }
  },
  
  getters: {
    
  }
}

4.在goods_detail.vue中调用

复制代码

import { mapState, mapMutations } from 'vuex'

    methods: {
      ...mapMutations('m_cart'),

1)调用cart.js中的addToCart

复制代码

 methods: {
      ...mapMutations('m_cart',['addToCart']),

5.定义getters

复制代码

 getters: {
    total(state){
      let c = 0
      state.cart.forEach(x => c += x.goods_count)
      return c
    }

1)在goods_detail中进行映射

复制代码

  //定义一个监听器
    watch:{
      //1.监听total值的变化，通过第一个形参得到变化后的新值
        total(newVal){
          //2.通过数组的find()方法,找到购物车按钮的配置对象
          const findResult = this.options.find(x => x.text === '购物车')
          if(findResult){
            //3.动态为购物车按钮的info属性赋值
            findResult.info = newVal
          }
        }
    },

6.持久化存储购物车的商品

复制代码

export default{
  namespaced: true,
  
  state: ()=> ({
    //购物车的数组，用来存储购物车中每个商品的信息对象
    //每个商品的信息对象，都包含如下6个属性
    //{goods_id,goods_name,goods_price,goods_count,goods_small_logo,goods_state}
    cart: JSON.parse(uni.getStorageSync('cart') || '[]')
  }),
  
  mutations: {
    addToCart(state,goods){
      //根据提交的商品的id,查询购物车中是否存在这件商品
      //如果不存在，则findResult为undefined;否则，为查找到的商品信息对象
      const findResult = state.cart.find(x => x.goods_id === goods.goods_id)
      
      if(!findResult){
        //如果购物车中没有这件商品，则直接push
        state.cart.push(goods)
      }else{
        //如果购物车中有这件商品，则只更新数量即可
        findResult.goods_count++
      }
      //通过commit方法，调用m_cart命名空间的saveToStorage方法
      this.commit('m_cart/saveToStorage')
      
    },
    
    saveToStorage(state){
        uni.setStorageSync('cart',JSON.stringify(state.cart))
    }
  },

  getters: {
    total(state){
      let c = 0
      state.cart.forEach(x => c += x.goods_count)
      return c
    }
  }
}

7.优化商品详情页的total侦听器

这样可以确保一刷新就加载购物车数

复制代码

 //定义一个监听器
    watch:{
      //1.监听total值的变化，通过第一个形参得到变化后的新值
        // total(newVal){
        //   //2.通过数组的find()方法,找到购物车按钮的配置对象
        //   const findResult = this.options.find(x => x.text === '购物车')
        //   if(findResult){
        //     //3.动态为购物车按钮的info属性赋值
        //     findResult.info = newVal
        //   }
        // }
        total: {
          handler(newVal){
            const findResult = this.options.find(x => x.text === '购物车')
            if(findResult){
              findResult.info = newVal
            }
          },
          //immediate属性用来声明次侦听器,是否在页面初次加载完毕后立即调用
          immediate: true
        }
    },

8.点击商品详情页购物车图标跳转到购物车页面

复制代码

<template>
  <view>
    cart
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  
  
  export default {
    //计算属性
    computed: {
        ...mapGetters('m_cart',['total'])
    },
    onShow(){
        this.setBadge()
    },
    data() {
      return {
        
      }
    },
    methods: {
      setBadge(){
        uni.setTabBarBadge({
          index:2,
          text: this.total + ''
        })
      }
    }
  }
</script>

<style>

</style>

9.创建minixs目录进行封装

tabbar-badage.js配置,减少重复代码

复制代码

import { mapGetters } from 'vuex'

 
  export default {
    //计算属性
    computed: {
        ...mapGetters('m_cart',['total'])
    },
    onShow(){
        this.setBadge()
    },
    
    methods: {
      setBadge(){
        uni.setTabBarBadge({
          index:2,
          text: this.total + ''
        })
      }
    }
  }

cart.vue页面配置，（其他tabbar页面也是同样配置）

复制代码

<template>
  <view>
    cart
  </view>
</template>

<script>
  
  import badgeMix from '@/mixins/tabbar-badge.js'
  
  export default {
    mixins: [badgeMix],
    data() {
      return {

      }
    }

  }
</script>

<style>

</style>