0x00 前言
本文將對 Vue-Vben-Admin 的狀態管理實現原始碼進行分析解讀,耐心讀完,相信您一定會有所收穫!
0x01 errorLog.ts 錯誤日誌
檔案 src\store\modules\errorLog.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);