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) 簡潔的構造方式進行陣列和物件構造。

1. 更新錯誤紀錄檔時間屬性。
2. 將紀錄檔資訊加入名為 errorLogInfoList 的陣列中。
3. 同時更新錯誤紀錄檔總數(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);

0x02