模块案例
Mr.Hope ... 大约 1 分钟
本案例展示了 Mr.Hope 个人编写的 screen 相关的 Vuex 模块。
# Sreen.ts
/*
* @Author: Mr.Hope
* @Date: 2019-05-16 15:35:49
* @LastEditors: Mr.Hope
* @LastEditTime: 2019-09-15 17:26:35
* @Description: Vuex Screen Module
*/
import { ActionContext } from "vuex";
import { BaseState } from "../state";
/** 屏幕状态 */
export interface ScreenState {
[propName: string]: string | number | boolean;
/** 屏幕宽度 */
width: number;
/** 屏幕当前尺寸状态 */
status: string;
/** 屏幕是否符合xs状态 */
xs: boolean;
/** 屏幕是否符合sm状态 */
sm: boolean;
/** 屏幕是否符合md状态 */
md: boolean;
/** 屏幕是否符合lg状态 */
lg: boolean;
/** 屏幕是否符合xl状态 */
xl: boolean;
/** 屏幕是否符合xxl状态 */
xxl: boolean;
}
/** 屏幕基础状态 */
const screenState: ScreenState = {
width: 0,
status: "",
xs: false,
sm: false,
md: false,
lg: false,
xl: false,
xxl: false,
};
export default {
state: screenState,
mutations: {
/**
* 设置屏幕状态
*
* @param state state
* @param width 屏幕宽度
*/
changeScreen(state: ScreenState, width: number) {
let status;
// judge scrren status
if (width > 1200) status = width < 1600 ? "xl" : "xxl";
else if (width < 768) status = width < 576 ? "xs" : "sm";
else status = width < 992 ? "md" : "lg";
// if there is a new status, then handle state detail
if (state.status !== status) {
const hash = ["sm", "md", "lg", "xl", "xxl"];
state.status = status;
if (status === "xs") {
// make xs 'true' and the rest 'false'
if (!state.xs) state.xs = true;
hash.forEach((x) => {
if (state[x]) state[x] = false;
});
} else {
// mark xs false
if (state.xs) state.xs = false;
let index = hash.indexOf(status);
let index2 = hash.length - 1;
// change the elments after 'status' false
while (index2 > index) {
if (state[hash[index2]]) state[hash[index2]] = false;
index2 -= 1;
}
// change the elments before 'status' true
while (index + 1) {
if (!state[hash[index]]) state[hash[index]] = true;
index -= 1;
}
}
}
},
/**
* 设置屏幕宽度
*
* @param state state
* @param width 屏幕宽度
*/
screenWidth(state: ScreenState, width: number) {
state.width = width;
},
},
actions: {
/**
* 获取屏幕状态
*
* @param context state
* @param width 屏幕宽度
*/
screen(context: ActionContext<ScreenState, BaseState>, width: number) {
context.commit("screenWidth", width);
context.commit("changeScreen", width);
},
},
};
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
本文件包含了完整的一份 state、数个 mutation 和一个 action。