結合Vuex創造一個完美的vue-loading/vue-toast元件
阿新 • • 發佈：2019-01-27
先上demo
解析(必要的叨叨)
一般的
loading邏輯
通過一個 Boolean 變數控制loading的展示與關閉狀態,
考慮到: 當程序是單個的, 這種方法確實是最簡單的也最有效的
但是實際應用中, 很多情況都不是單程序的, 例如: 多個http請求, 多個本地任務等場景, 所以這種方案, 應該被摒棄
當多個http請求在同時執行的時候 一旦某個請求完成 那麼這個控制顯示的變數就變成了false
這時候其實還有一個或者多個請求沒有完成的,所以會導致loading載入結束,仍有部分資料是空白的,使用者體驗極差
通過佇列(
list)的形式來記錄loading的例項
個人覺得, 更加合理的loading控制方案應該是以佇列的形式來展現的,
所以結合vuex
loading元件定義一個佇列來儲存當前的loading列表)可以直觀,
而且準確無誤的控制loading的開啟和關閉如果你需要更為精準的方案: 給每一個
loading繫結一個uuiddemo 上沒有用
uuid這種方法,因為只是演示當然,要加上去並不難,具體需不需要就看你們自己專案需求了.
toast元件是同樣的原理, 做一些細微的業務需求調整即可實現, 我就不多說了.
我想大部分人已經是第二種甚至是更完美的解決方案了, 此偏文章僅當作給新手之路和個人學習筆記之一
還有 demo 中vuex的寫法並非完全按照官方最佳實踐來的. 因為只是個demo, 寫得有點急也為了讓新手看得沒這麼繞, 真正寫元件別學我!!!