watch监听vuex数据改变,实现自动改变兄弟页面数据

实例图

实现原理和思想

原理

1.vuex数据共享
2.watch监听数据数据的改变

逻辑

1.在vuex中的state中创建键值对 isRed:false
2.找到A组件(想要共享出去数据的组件)method中的共享数据的方法,使用 that.$store.state.isRed赋值
3.在vuex的actions中创建一个方法获取共享数据(方法名随意)

getCollectAppList(state,str){
   this.state.isRed = str
},

4.找到B组件(想要得到数据的组件)
分两种结果:

	1. 直接用this.state.isRed 获取改变值::即使vuex的简易传值可用于父子.兄弟传值

	2. watch监听    

     	'$store.state.isRed'(val, oldVal){
     	 console.log(val, oldVal,"watch监听事件");//打印出结果isRed的前世和今生值		
	     	 		if (!val || !oldVal) {
					        this.getCollectAppList() 加if判断条件来改变你想要的事件触发
					    }
     	 			}