关于vant标签栏徽标提示的实时刷新

最新推荐文章于 2024-07-19 11:25:02 发布

一个假的前端男

最新推荐文章于 2024-07-19 11:25:02 发布

阅读量2.8k

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/IT_iosers/article/details/107782470

版权

vue 专栏收录该内容

79 篇文章 1 订阅

订阅专栏

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