Vue 常量使用
第一种方法
单独定义一个 constant.js，内容如下：
// 大屏卡片标题
export const BIG_SCREEN_CARD_TITLE = {
memberCount: '注册人员数',
todayCount: '安全培训人数',
totalCount: '培训统计次数',
}
// 大屏卡片 icon
export const BIG_SCREEN_CARD_ICON = {
memberCount: 'big-screen-1',
todayCount: 'big-screen-3',
totalCount: 'big-screen-2',
}
在需要使用的文件中引入
import { BIG_SCREEN_CARD_TITLE, BIG_SCREEN_CARD_ICON } from '@/constant.js'
该方法有一个弊端，不能在 template 模板中使用，只能在 js 代码中使用
第二种方法
使用 plugin 插件的思路，将常量挂载到 Vue.prototype 上，目录结构如下：
- 定义常量 /src/constants/module/bigScreen.js
```
// 大屏卡片标题
export const BIG_SCREEN_CARD_TITLE = {
memberCount: '注册人员数',
todayCount: '安全培训人数',
totalCount: '培训统计次数',
}
// 大屏卡片 icon
export const BIG_SCREEN_CARD_ICON = {
memberCount: 'big-screen-1',
todayCount: 'big-screen-3',
totalCount: 'big-screen-2',
}
```
- 收集所有模块的常量，暴露常量 /src/constants/module/index.js
```
const EnumModule = {}
const req = context => context.keys().map(context)
/** 批量导入当前文件夹下所有的.js文件
* @param {} 要搜索的文件夹目录
* @param {} 是否还应该搜索它的子目录，
* @param {} 以及一个匹配文件的正则表达式。
*/
const options = req(require.context('./', true, /\.js$/))
options.forEach(option => {
Object.assign(EnumModule, {...option})
});
export default EnumModule
```
- 定义 plugin 插件函数，将所有常量挂载到 Vue 上 /src/constants/enum.js
```
const EnumUtil = {}
EnumUtil.install = function (Vue, data = {}) {
const constInfo = {...data}
const Enum = {...data}
/**
* @param {} constName 枚举对象的名称
* @param {} value 枚举值
* @param {} desc 枚举值对应的描述
*/
Enum.getConst = function(constName, value) {
if(!constInfo.hasOwnProperty(constName)) {
return ''
}
let constItem = constInfo[constName] // 通过传进来的名字拿到所对应的常量项
for(let item in constItem) {
if(constItem[item].value === value) {
return constItem[item].value
}
}
}
Vue.prototype.$enum = Enum; // 挂载到原型上面
}
export default EnumUtil
```
- 执行 plugin 函数，挂载到 Vue.prototype 上 /src/constants/index.js
```
import Vue from 'vue'
import Enum from './enum'
import EnumModule from './module'
Vue.use(Enum, EnumModule)
```
-
引入到 main.js 入口文件
// 引入常量
import '@/constants/' -
使用
1. 在 js 中使用this.$enum['BIG_SCREEN_CARD_TITLE']- 在 template 中使用
<div>{{$enum['BIG_SCREEN_CARD_TITLE']}}</div>