0x00 前言
本文将对 Vue-Vben-Admin 的状态管理实现源码进行分析解读,耐心读完,相信您一定会有所收获!
0x01 errorLog.ts 错误日志
文件 srcstoremoduleserrorLog.ts
声明导出一个store实例 useErrorLogStore
、一个方法 useErrorLogStoreWithOut()
用于没有使用 setup
组件时使用。
// 错误日志存储实例 export const useAppStore = defineStore({ id: 'app-error-log', state: {}, getters: {} actions:{} }); export function useErrorLogStoreWithOut() { return useErrorLogStore(store); }
State / Getter
状态对象定义了错误日志信息数组、错误日志信息总数。
state: (): ErrorLogState => ({ errorLogInfoList: null, // Nullable<ErrorLogInfo[]> errorLogListCount: 0, }), getters: { // 获取错误日志 默认空数组 getErrorLogInfoList(): ErrorLogInfo[] { return this.errorLogInfoList || []; }, // 获取错误日志总数量 getErrorLogListCount(): number { return this.errorLogListCount; }, },
errorLogInfoList
是一个名为 ErrorLogInfo
对象数组,记录了错误详细信息,包含错误类型、错误产生错文件信息、错误名称、错误信息、调用堆栈信息、错误详情、页面url、错误发生时间。
export interface ErrorLogInfo { type: ErrorTypeEnum; // 错误类型 file: string; // 产生错误文件 name?: string; // 错误名称 message: string; // 错误信息 stack?: string; // 调用堆栈信息 detail: string; // 错误详情 url: string; // 页面url time?: string; // 发生时间 }
错误类型有4种,分别为 Vue异常
、 脚本错误
、 静态资源异常
、 promise异常
。
// 错误类型 export enum ErrorTypeEnum { VUE = 'vue', SCRIPT = 'script', RESOURCE = 'resource', AJAX = 'ajax', PROMISE = 'promise', }
Actions
addErrorLogInfo
方法用于添加错误日志,接受类型为ErrorLogInfo
的参数,使用 展开语法(Spread syntax) 简洁的构造方式进行数组和对象构造。
- 更新错误日志时间属性。
- 将日志信息加入名为
errorLogInfoList
的数组中。 - 同时更新错误日志总数(
errorLogListCount
)+1
。
addErrorLogInfo(info: ErrorLogInfo) { const item = { ...info, time: formatToDateTime(new Date()), }; this.errorLogInfoList = [item, ...(this.errorLogInfoList || [])]; this.errorLogListCount += 1; },
setErrorLogListCount
方法用于重置错误日志总数数值。
setErrorLogListCount(count: number): void { this.errorLogListCount = count; },
addAjaxErrorInfo
方法用于在ajax请求错误后触发,将返回的错误信息格式化后,调用 addErrorLogInfo
方法将其添加至系统全局数组中。
addAjaxErrorInfo(error) { const { useErrorHandle } = projectSetting; if (!useErrorHandle) { return; } const errInfo: Partial<ErrorLogInfo> = { message: error.message, type: ErrorTypeEnum.AJAX, }; if (error.response) { ... } this.addErrorLogInfo(errInfo as ErrorLogInfo); },
需要在项目配置 src/settings/projectSetting.ts
中开启,将useErrorHandle
属性值设置 true
,默认不开启。
// src/settings/projectSetting.ts // 是否使用全局错误捕获 useErrorHandle: true,
使用 Partial
将类型定义的所有属性都修改为可选。
声明了一个错误日志对象,仅定义了类型和消息两个属性值。
其余的属性值通过对 error.response
对象内容进行解构,然后进行对象属性赋值。
const errInfo: Partial<ErrorLogInfo> = { message: error.message, type: ErrorTypeEnum.AJAX, }; if (error.response) { const { config: { url = '', data: params = '', method = 'get', headers = {} } = {}, data = {}, } = error.response; errInfo.url = url; errInfo.name = 'Ajax Error!'; errInfo.file = '-'; errInfo.stack = JSON.stringify(data); errInfo.detail = JSON.stringify({ params, method, headers }); }
最后调用addErrorLogInfo
方法,添加错误日志信息。
this.addErrorLogInfo(errInfo as ErrorLogInfo);