需求:
组件A为公共组件,负责定时查询信息通知,并通过模态展示;
组件B为业务组件,负责项目中报告的编辑审核等业务流程;
用户打开组件A中的信息通知模态时,可以选择接受或拒绝处理相关通知,接受时直接打开组件B进行业务,拒绝时只刷新通知不进行其他操作。这就需要监听组件A中的事件,当用户打开通知模态点击接受时,获取组件A中所选择用户的id并触发组件B中的方法。
图示:
1.红框中为菜单组件A中的消息通知,其它部分为组件B
2.点击消息通知时的操作模态
解决办法:
由于两个组件间不存在父子关系,且业务中已经使用到vuex,因此,决定采用vuex作为中介。一开始设想用户点击组件A中的通知时,通知参数noticeId通过vuex在组件间进行传递,在组件B中通过watch监听noticeId变化来调用组件中的事件。后来考虑到当用户点击同一通知时传递的参数一致,会导致组件B中的watch无法监听到变化进而无法调用事件,因此在vuex中增加布尔值用于改变状态,通过监听变化的布尔值来获取noticeId。
1.vuex
state: {
noticeId:'',// 存储组件A中通知用户的ID
isNotice:false,// 用于修改监听状态,避免点击同一id时组件B中的watch失效
},
mutations: {
GET_NOTICEID:(state,data) => {
state.isNotice = !state.isNotice;// 每次调用时更新状态
state.noticeId = data;
}
}
2.组件A中的主业务:
// 接受按钮,id为通知中的对应用户id
define(id) {
// 判断是否勾选立即书写
if(this.isWrite) {
// 判断路由,处于组件B中时通过commit提交参数到vuex中,'work/radiation'为组件B的路由
if(this.$route.path.indexOf('work/radiation') !== -1) {
this.$store.commit('GET_NOTICEID',id);
} else {
// 处于其他组件时携带参数跳转到组件B页面
this.$router.push('/work/radiation?id=' + id);
}
} else {
//仅调用接受接口并刷新数据...
}
},
3.组件B中业务:
// 获取vuex中的isNotice布尔值,用于监听。注:isNotice每次调用都会改变,见1.
computed: {
isNotice() {
return this.$store.state.user.isNotice
}
},
watch:{
isNotice(val,oldVal) {
console.log(this.$store.getters.noticeId);// 通过vuex传递来的组件A中的参数
// 触发组件B中的事件...
}
}