监听vue全局状态的值（附demo）

背景

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