loading.js
1.52 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/*
* @Date: 2025-11-04 10:45:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-04 10:45:00
* @FilePath: /src/stores/loading.js
* @Description: 全局Loading状态管理
*/
import { defineStore } from 'pinia'
/**
* 全局loading状态管理
* @description 使用计数的方式管理并发请求的loading显示与隐藏
*/
export const useLoadingStore = defineStore('global_loading', {
state: () => ({
// 当前正在进行中的网络请求数量
pending_count: 0,
// 是否显示全屏loading
is_loading: false
}),
getters: {
// 是否存在进行中的请求
has_pending(state) {
return state.pending_count > 0
}
},
actions: {
/**
* 开始一次请求,增加计数并显示loading
* @returns {void}
*/
start() {
this.pending_count += 1
this.is_loading = true
},
/**
* 结束一次请求,减少计数,当计数归零时隐藏loading
* @returns {void}
*/
end() {
if (this.pending_count > 0) {
this.pending_count -= 1
}
if (this.pending_count === 0) {
this.is_loading = false
}
},
/**
* 请求异常或需要强制关闭时,重置计数并隐藏loading
* @returns {void}
*/
reset() {
this.pending_count = 0
this.is_loading = false
}
}
})