1. 程式人生 > >vue裏面簡單的數據緩存

vue裏面簡單的數據緩存

gen 頁碼 用戶體驗 false light 新版 mage 表格 span

先給一種原始的方法sessionStorage或者localStorage

先說一下實現原理:

比如分頁,你從第2頁進入詳情頁

技術分享圖片

返回為了方便用戶體驗,肯定最好能回到當前這一頁

我用的分頁是elementui的分頁,可以在分頁切換的時候把頁碼緩存下來

handleCurrentChange(val){
      this.listQuery.pageNo=val;
      sessionStorage.setItem(currentPage,this.listQuery.pageNo);//重點在這裏
      this.getSchoolWebModuleMessageListFunc();
    },

你進入詳情頁的時候或者編輯頁的時候你可以給一個標識,可以相同例如

sessionStorage.setItem("detail",true); 

然後你進入列表(就是有分頁的那個頁面)

if(sessionStorage.getItem(detail)){
 //上面這個就是去到詳情頁或者編輯頁的標識// 
//如果有這個就讀取緩存裏面的數據
 
this.listQuery.pageNo=Number(sessionStorage.getItem("currentPage"));
}else{ 

  this.listQuery.pageNo=1;
  //這個主要是從其他頁面第一次進入列表頁,清掉緩存裏面的數據
  sessionStorage.removeItem(
"currentPage");
}

其實還有一個bug就是你已經跑過詳情頁,瀏覽器緩存裏面已經有detail,你從其他頁面再次想第一次那樣進入,你本身應該不需要緩存裏面的數據

你可以在離開列表頁面的時候去掉detail,如下:

destroyed(){
    sessionStorage.removeItem("detail");
  },

補充一個elementui表格新版本存在的一個bug

就是分頁的臨界點刪除的時候,比如第4頁就一條信息,刪除的時候他並不會自動請求第3頁,而是繼續傳第4頁過去導致查詢回來的數據為空

你可以在表格數據的這個函數裏面加下面這一段

this.messageTable=data.data.dataList;
/**/
 if(this.messageTable.length==0&&this.listQuery.pageNo!==1){
     this.listQuery.pageNo--; //如果長度為空,且不是第一頁,那就讓他頁碼自動減1,回調本函數
      this.getSchoolWebModuleMessageListFunc();
 }
/**/主要是註釋裏面的代碼,
 this.total=data.data.pagination.total;
 this.listLoading=false;

  

vue裏面簡單的數據緩存