vue里面简单的数据缓存

先给一种原始的方法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里面简单的数据缓存

猜你喜欢