先上demo

demo: https://deboyblog.github.io/vue-vuex-loading/

github: https://github.com/deboyblog/vue-vuex-loading

解析(必要的叨叨)

一般的loading逻辑

通过一个 Boolean 变量控制loading的展示与关闭状态, 考虑到: 当进程是单个的, 这种方法确实是最简单的也最有效的
但是实际应用中, 很多情况都不是单进程的, 例如: 多个http请求, 多个本地任务等场景, 所以这种方案, 应该被摒弃
当多个http请求在同时执行的时候 一旦某个请求完成 那么这个控制显示的变量就变成了false
这时候其实还有一个或者多个请求没有完成的,所以会导致loading加载结束,仍有部分数据是空白的,用户体验极差

通过队列(list)的形式来记录loading的实例

个人觉得, 更加合理的loading控制方案应该是以队列的形式来展现的,
所以结合vuex(或者你可以直接loading组件定义一个队列来存储当前的loading列表)可以直观, 而且准确无误的控制loading的打开和关闭
如果你需要更为精准的方案: 给每一个loading绑定一个uuid
demo 上没有用uuid这种方法,因为只是演示其实是我懒
当然,要加上去并不难,具体需不需要就看你们自己项目需求了.
toast组件是同样的原理, 做一些细微的业务需求调整即可实现, 我就不多说了.

我想大部分人已经是第二种甚至是更完美的解决方案了, 此偏文章仅当作给新手之路和个人学习笔记之一
还有 demo 中vuex的写法并非完全按照官方最佳实践来的. 因为只是个demo, 写得有点急也为了让新手看得没这么绕, 真正写组件别学我!!!