vue中模块化管理（modules）之全局常量

vue 中模块化管理----定义全局常量

common 文件夹存放公共模块

应用场景：下拉选择框，选择框里面的数据一般是常量，所以可以定义为全局常量方便管理

代码如下：

//1. 定义全局常量
//角色状态 status.js
export const ROLE_STATUS = {
  STATUS_0: {
    desc: '启用',
    value: '0'
  },
  STATUS_1: {
    desc: '停用',
    value: '1'
  }
}

/* 2. 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

// 3. 定义常量工具方法--枚举， this.$enum.getDescByValue(constantName, value) 可以获得对应的desc（启用或者停用）
/** 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

 // 4. constant/index.js中使用vue.use应用

import Vue from 'vue'
import Enum from './enum' // 枚举方法
import EnumModule from './module' // 所有模块

Vue.use(Enum, EnumModule)


// 5. commmon/index.js中统一引入
import './constant';
// import './filters'; // 有可能存在全局过滤器啥的，这里不举例

// 6. main.js
import './common' // 引入全局方法或常量或过滤器....

https://blog.csdn.net/qq_41999617/article/details/114880787 参考