vue里面简单的数据缓存

  • Z时代
  • 2024-01-10
  • 分类：综合

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");
  },

方法二keep-alive

<keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>
/*这个是在template里面设置，如果路由meta挂载keppAlive说明页面需要缓存，不挂载就是不需要*/

{
          path:\'\',
          name:\'\',
          component:() => import(\'\'),
          meta:{
            keepAlive:true
          },//路由meta(meta也可以挂载静态权限例如meta: {
            permissionPath: \'权限路由\'
          })

//使用起来其实也很简单，你只要了解keepalive里它有两个生命周期：
activated: keep-alive组件激活时调用
deactivated: keep-alive组件停用时调用
在借助守卫钩子beforeRouteLeave就行了

mounted(){
    if(!this.$route.meta.keepAlive){
        //这是页面不要缓存的情况进入，接下来就是你自己的逻辑
    }
}，
activated(){
    if(this.$route.meta.keepAlive){
       //这是页面缓存的情况进入，接下来就是你自己的逻辑
    }
} ，
beforeRouteLeave(to, from, next) {
    if(to.//你到哪些页面要缓存，哪些不需要缓存自己写){
      from.meta.keepAlive=true;
      next();
    }else{
      from.meta.keepAlive=false;
      this.$destroy();
      next();
    }
}

补充一个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里面简单的数据缓存 的全部内容， 来源链接： utcz.com/z/376959.html

回到顶部