vue工具之定义全局常量

一、常量的一般使用

一般我们会在一个单独的js文件中定义常量，如：

.. /constant/index.js

export const SYSTEM_NAME = 'RAYE管理系统'
export const SYSTEM_VERSION = '1.0'
//角色状态 status.js
export const ROLE_STATUS = {
    STATUS_0: {
      desc: '启用',
      value: '0'
    },
    STATUS_1: {
      desc: '停用',
      value: '1'
    }
}
// 验证结果 select.js
export const VERIFY_RESULT = {
    PASS: {
      desc: '通过',
      value: '1'
    },
    NOT_PASS: {
      desc: '不通过',
      value: '0'
    }
  }

如果需要使用，只需要在相应的页面加入import即可

import { ROLE_STATUS, VERIFY_RESULT } from '../../../constant/index

🤷: 但这样做有一个弊端，无法在页面上直接使用，只能在<script> </script>内使用，如果想在页面内使用, 比如<div>{{ xxxx }}</div>,不妨试试下面的方法。

二. 全局常量

1. 创建constant文件夹

在src下创建constant文件夹，用于存放全局常量相关配置，创建好后在其内创建module文件夹，用于存放常量文件。

比如: 

2. module其他的js文件

🔊：gender.js, status.js, system.js

定义项目中所需要的常量，如：

// 角色性别
export const ROLE_GENDER = {
  MAN: {
    value: '0',
    desc: '男'
  },
  WOMAN: {
    value: '1',
    desc: '女'
  }
}

或：

export const SYSTEM_NAME = 'RAYF管理系统'
export const SYSTEM_VERSION = '1.0'

3.constant\module\index.js

/** module/index.js
 * 常量枚举池
 * 可以根据文件对枚举所属的模块进行拆分
 * 此文件主要是收集模块常量然后统一暴露出去
 */
const EnumModule = {}
const req = context => context.keys().map(context)
const options = req(require.context('./', true, /\.js$/)) // 批量导入当前文件所在目录下的.js文件
options.forEach(option => {
  Object.assign(EnumModule, {
    ...option
  })
})

export default EnumModule

4. constant\enum.js

/** enum.js
 * 枚举工具类的定义
 * 可以全局使用this.$enum.getDescByValue()等等...
 */
const EnumUtil = {}
EnumUtil.install = function (Vue, data) {
  const constantInfo = data || {}
  const Enum = { ...data }
  /**
   * 根据枚举值获取描述
   * @param {*} constantName  枚举对象的名字
   * @param {*} value         枚举值
   * @param {*} desc          枚举值所对应的描述
   */
  Enum.getDescByValue = function (constantName, value) {
    if (!constantInfo.hasOwnProperty(constantName)) {
      return ''
    }
    let constantItem = constantInfo[constantName] // 通过传进来的名字拿到所对应的常量项
    for (let item in constantItem) {
      // 循环常量项
      if (constantItem[item].value === value) {
        return constantItem[item].desc
      }
    }
  }
  Vue.prototype.$enum = Enum // 挂在原型上，方便使用
}
export default EnumUtil

5. constant\index.js

// constant/index.js
import Vue from 'vue'
import Enum from './enum'
import EnumModule from './module'

Vue.use(Enum, EnumModule)

6. 最后在main.js内引入

// 引入常量
import './constant/'

此时，就可以在页面内使用常量了，使用方法：<div>{{ $enum.SYSTEM_NAME }}</div>