奇技淫巧—彈窗的處理

每當界面中彈窗一多,交互略複雜的時候,本身的代碼就會處理的很是的亂。此次作的一個自用後臺項目,由於一開始時要求不高,沒有作好數據的規劃,致使最後項目很是的難易維護。vue

圖片描述
過多的elDialg直接暴露,處理的邏輯都在一個界面中,data中是數據量過於龐大,很難維護
圖片描述
應該直接將彈窗處理成一個組件,數據也應該統一在組件中或者組件外處理完成,界面的數據結構也會清晰不少。
當彈窗與彈窗之間的交互不少的時候,就再也不用各自彈窗之間相互引用,而是統一用一個vuex去集中控制這些彈窗的數據交互。
圖片描述
在項目中,已經將store分割成模塊module,而這些彈窗的visible都是經過Vuex來控制,因此統一放在了一個dialogControl對象中
圖片描述
在mutations中寫入一個可配置的方法,控制dialogControl對象
因而,不管彈窗與彈窗之間如何複雜,只要控制入口就好。vuex

可是當組件與界面之間有個別交互的時候,能夠考慮用bus來觸發界面上的數據更新。數據結構

相關文章
相關標籤/搜索
本站公眾號
   歡迎關注本站公眾號,獲取更多信息