Vue项目常量的使用

Vue项目常量的使用

魔法值就是指数字或字符串常量值，如果我们直接在代码中使用魔法值，当魔法值修改，可能要改很多地方，常量一般用于优化魔法值，通过常量可以对魔法值进行统一管理，如果后续魔法值需要修改，修改一处即可。

1、常量的定义

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

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

或：

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

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

import { ROLE_GENDER } from '../../../constant/module/gender'
import { SYSTEM_NAME, SYSTEM_VERSION } from '../../../constant/module/system' 

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

2、全局常量

为了解决上面的问题，我们可以将常量封装为全局常量，使用方法也非常的简单。

2.1、创建constant文件夹

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

constant内的enum.js和index.js，module内的index.js的代码可以直接参照下面来写。module其他的js文件存储章节1中的普通常量文件即可。

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

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

constant\index.js

// constant/index.js

import Vue from 'vue'
import Enum from './enum'
import EnumModule from './module'

Vue.use(Enum, EnumModule)

最后在main.js内引入

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

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

参考：Vue定义全局常量，全局方法