关于vant标签栏徽标提示的实时刷新
1、badge围标属性<van-tabbar-itemicon="shopping-cart-o"name='/shoppingcar'to="/shoppingcar":badge='$store.state.count'>购物车</van-tabbar-item>2、通过全局状态函数重点在于全局变量的函数的使用import Vue from 'vue'import Vu
·
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: {}
})
更多推荐
已为社区贡献10条内容
所有评论(0)