Vue中怎样封装与使用公共状态属性组件实现类似枚举类的效果

场景

如果一个状态量在多个地方用到，或者一个业务用到多个状态量。

可以使用类似枚举类代替直接使用明文表示。

这样如果需要修改状态量的值就不用再每个地方都要修改。

Vue中要实现同样的效果，比如自定义一些错误码。

即401代表什么，403代表什么，默认的错误码返回什么。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先在项目目录下新建utils目录，在此目录下新建errorCode.js

export default {
  '401': '认证失败，无法访问系统资源',
  '403': '当前操作没有权限',
  '404': '访问资源不存在',
  'default': '系统未知错误，请反馈给管理员'
}

按照以上格式自定义一些错误码以及默认错误码。

然后在需要使用的地方，这里假设是登录时发送请求的js中

import errorCode from '@/utils/errorCode'

引入该组件

则可以用如下的形式使用错误码

    // 未设置状态码则默认成功状态
    const code = res.data.code || 200;
    // 获取错误信息
    const message = errorCode[code] || res.data.msg || errorCode['default']

code是后台返回的状态码，然后去erroeCode中通过errorCode[code]的形式去匹配

或者直接指定

errorCode['default']

获取默认的错误码即'系统未知错误，请反馈给管理员'