结合Vuex创造一个完美的vue-loading/vue-toast组件

先上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, 写得有点急也为了让新手看得没这么绕,
真正写组件别学我!!!