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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
2020-07-05 跨域问题及解决方案