1、badge 微标属性

      <van-tabbar-item  icon="shopping-cart-o"   name='/shoppingcar'  to="/shoppingcar"  :badge='$store.state.count'>购物车</van-tabbar-item>

2、通过全局状态函数 重点在于全局变量的函数的使用

import Vue from 'vue'
import Vuex from 'vuex'
import api from '../http/api'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
    //定义全局变量
        count: 0 //购物车数量
    },
    mutations: {
        sum(state) {
            let username = JSON.parse(localStorage.getItem('user'))
            if (username) {
                window.console.log('获取购物车数量:');
                api.getCard().then(res => {
                    window.console.log('购物车', res);
                    state.count = res.shopList.length;
                    window.console.log(state.count)
                }).catch(err => {
                    window.console.log(err)
                })
            } else {
                state.count = 0
            }
        }
    },
    actions: {},
    modules: {}
})
Logo

前往低代码交流专区

更多推荐