监听vuex全局状态的值

背景vant-ui组件链接原理交互效果

背景

我是根据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实在订单上这就没错了，我是用代码实现，而不是点击事件！