通過vuex傳遞引數並觸發元件中的事件
阿新 • • 發佈:2019-01-12
需求:
元件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中的事件...
}
}