监听vuex全局状态的值
背景
我是根据vant-ui组件库中有个tabbar组件中,有个属性v-model=‘active’中,要改变他的值,也就是跳转页面,除了点击tabbar按钮,也可以改变全局状态中的变量从而切花页面。(这个问题苦恼了我好几天,特此记录下过程)
vant-ui组件链接
https://youzan.github.io/vant/#/zh-CN/tabbar
图片:
原理
//全局状态
export default {
store:new Vuex.Store({
state:{
active:0
},
mutations:{
setActive:function(state,payload){
state.active = payload;
}
}
})
}
全局状态中我设置了,active的一个值,是为了让她变化就可以改变下面tabbar中active的属性,具体的vuex原理我就不介绍了。
//这是vue组件中的template模板,用来写html标签
//可以从上面的链接中查看(此处是为了介绍)
<van-tabbar v-model="active">
<van-tabbar-item info="3">
<span>自定义</span>
<img
slot="icon"
slot-scope="props"
:src="props.active ? icon.active : icon.normal"
>
</van-tabbar-item>
<van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
上面的html标签中有active这个属性,就是控制页面的变化,比如有四个页面,这个active的取值就是0-3,也就是索引,只要改变他的变化,就能实现页面跳转。
//组件
export default {
data(){
active: 0,
icon: {
normal: '//img.yzcdn.cn/icon-normal.png',
active: '//img.yzcdn.cn/icon-active.png'
}
},
computed:{
//监听全局状态中的值,只要改变下面的watch监听器就会监听到,从而触发事件
setActive:this.$store.state.active
},
watch:{
setActive:{
handler:function(newval,oldval){
// 从而全局状态改变的值,就会赋值给当前控制页面变化的active,他只要一变就会实现页面跳转
this.active = newval;
}
}
}
}
// 我写的随便的一个方法 用来跳转页面
export default {
methods{
getShopCarList(){
// 改变全局状态值得方法,vuex原理,第一个参数是方法名,第二个是参数
this.$store.commit('setTabNum',1);
}
}
}
上面的代码中,是随便的一个组件中的方法,就是为了跳转页面,是通过代码跳转,而不是鼠标点击按钮,触发vant-ui人家早已经写好的代码。
交互效果
1.刚开始的页面,点击商家列表跳转到下图
点击购物车跳转到下图
点击确认支付跳转到下图
最下面的bannar实在订单上这就没错了,我是用代码实现,而不是点击事件!