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>