# SmartAdmin采用vue-enum进行常量管理
# 原因
如果你是全栈开发者，你应该了解服务端语言的枚举类型enum，但是对于前端而言没有枚举类型。 如果你是前端开发者，你一定见过这样的代码：
// 根据数字获取文件位置描述
getFileLocationTypeDesc(value) {
if(value === 1){
return "本地文件服务";
}
if(value === 3){
return "阿里OSS文件服务";
}
if(value === 3){
return "七牛文件服务";
}
},
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<div>
<span v-if="locationType === 2">
<input type="file"/>
</span>
<span v-if="locationType === 3">
<button value="上传"/>
</span>
</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
如果后端把value的值修改一种类型或者新加一种类型，想必前端改起来会非常麻烦，而且极其容易出错。
# 使用vue-enum
vue-enum (https://github.com/1024-lab/vue-enum) (opens new window)
vue-enum是河南·洛阳 1024创新实验室（钢圈网旗下）团队研发前端常量 枚举工具。
# 1、引入常量插件，并在main.js中注入。
npm install vue-enum --save
import Enum from 'vue-enum'
Vue.use(Enum,{enumInfo}) //enumInfo为需要注入的常量模块
1
2
3
4
5
2
3
4
5
# 2、在src目录下建立constants文件夹并建立index.js 将常量模块导出
constants/index.js 例:
import noticeConstantfrom './noticeConstant/index.js'
export default {
...noticeConstant,
}
1
2
3
4
2
3
4
# 3、按照以下格式进行枚举常量的定义
constants/noticeConstant/index.js
export const NOTICE_STATUS = {
YES: {
value: 1,
desc: '是'
},
NO: {
value: 0,
desc: '否'
}
};
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# vue-enum使用方法
vue-enum提供三个常规方法以供页面内组件使用
| 方法名 | 参数名 | 结果 |
|---|---|---|
| getDescByValue | enumName,value | 根据枚举值获取描述desc |
| getValueDescList | enumName | 根据枚举名获取对应的描述键值对[{value:desc}] |
| getValueDesc | enumName | 根据枚举名获取对应的value描述键值对{value:desc} |
例：
1、this.$enum.getDescByValue('NOTICE_STATUS',0)
// '是'
2、this.$enum.getValueDescList('NOTICE_STATUS')
[{
desc:'是'，
value:1
},
{
desc:'否'，
value:0
}]
3、this.$enum.getValueDesc('NOTICE_STATUS')
{
1:'是'，
0:'否'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
作者简介: 卓大 (opens new window)， 1024创新实验室主任，混迹于各个技术圈，熟悉点java，略懂点前端。
 |  |  |
| 加“卓大”微信，入群 | 关注 1024创新实验室！ | 我要请 1024创新实验室 喝胡辣汤~ |
