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判断条件来改变你想要的事件触发
}
}
下一篇：
IDEA连接服务器远程debug