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']

獲取默認的錯誤碼即'系統未知錯誤，請反饋給管理員'