Vue 使用插件 Plugin，管理静态常量

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 上，目录结构如下：

1. 定义常量 /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',
}
```

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
```

3. 定义 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

4. 执行 plugin 函数，挂载到 Vue.prototype 上 /src/constants/index.js

import Vue from 'vue' import Enum from './enum' import EnumModule from './module' Vue.use(Enum, EnumModule)

5. 引入到 main.js 入口文件
   // 引入常量
   import '@/constants/'

6. 使用
   1. 在 js 中使用

   this.$enum['BIG_SCREEN_CARD_TITLE']
   

   2. 在 template 中使用

   <div>{{$enum['BIG_SCREEN_CARD_TITLE']}}</div>