Vue中怎样封装与使用公共状态属性组件实现类似枚举类的效果
生活随笔
收集整理的這篇文章主要介紹了
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']獲取默認的錯誤碼即'系統未知錯誤,請反饋給管理員'
總結
以上是生活随笔為你收集整理的Vue中怎样封装与使用公共状态属性组件实现类似枚举类的效果的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Java中使用UUID工具类生成唯一标志
- 下一篇: html5倒计时秒杀怎么做,vue 设