vuex + keep-alive实现tab标签页面缓存功能


Posted in Javascript onOctober 17, 2019

在开发很多管理系统过程之中,常遇到这种需求,需要对打开路由页面进行缓存,然后在系统页眉提供方便查阅的tab标签进行切换以及对已经缓存页面进行数据刷新和清除数据操作。具体演示如下图所示:

vuex + keep-alive实现tab标签页面缓存功能 

在上面演示中实现了类似 window tab 标签页效果,会对当前数据进行缓存。在浏览器中实现对路由页面的缓存可以减少接口请求,也方便了用户来回切换想搜索的数据列表。

原理

Vue 提供的 keep-alive API实现对路由组件的缓存。 include 属性可以绑定一个数组,里面是需要路由组件的 name 值,可以实现对该路由组件进行缓存,如果不需要对路由进行缓存,直接移除该项元素即可。

vuex + keep-alive实现tab标签页面缓存功能 

代码组织和设计

实现上面的功能,采用 vuex 进行全局的缓存数据保存,定义为 cacheView ;已经打开的路由页面用 toolBarData 进行保存。下图是代码是代码设计整体图:

vuex + keep-alive实现tab标签页面缓存功能 

需要添加一个路由页面到 cacheView ,需要有 actions setCacheView 来 commit 一个 change Event 对 state 数据进行更改,然后修改后的数据会自动派发到 App.vue 中使用到该数据的位置(即 keep-alive
处)。而添加标签页也是类似的流程,不再描述。至于为什么要把标签页和路由缓存页面分离成两个数组,主要是有两方面的考虑:

name

store代码实现

store 代码实现如下所示,主要需要比较详细说明的是 clearToolItem ,这个函数是清除标签页。涉及两个规则:

如果关闭是当前处于激活的标签页,关闭之后。处于激活的标签页就默认是最后一个打开的标签页。

如果当前标签页是最后一个(处于激活状态),则关闭后自动默认它的前一个为默认激活标签页。

import router from '../router'
export default {
  state: {
    toolBarData:[],// 保存标签button的数组
    cacheView:[] // 保存需要缓存的数组
  },
  getters: {
    getToolData(state){
      return state.toolBarData;
    },
    getCacheView(state){
      return state.cacheView;
    }
  },
  mutations: {
    setToolData(state, data) { // 添加标签按钮,如果当前路由已经打开,则不再重复添加
      const inToolbar = state.toolBarData.find(item => item.detail === data.detail)
      !inToolbar && state.toolBarData.push({
        ...data
      });
    },
    setCacheView(state,data){ // 与setToolData类似
      if(state.cacheView.includes(data.componentName)) 
        return;
      state.cacheView.push(data.componentName);
    },
    clearToolItem(state,detail){
      const index = state.toolBarData.findIndex(item => item.detail === detail);
      const isActive = router.app.$route.path == state.toolBarData[index]["detail"];
      const len = state.toolBarData.length - 1;
      state.toolBarData.splice(index,1);
      (index == len || isActive) && router.push({path:state.toolBarData[state.toolBarData.length - 1]["detail"]});
    },
    clearCacheView(state,viewName){
      const index = state.cacheView.findIndex(item => item == viewName);
      state.cacheView.splice(index,1);
    }
  },
  actions: {
    commitToolBar({commit},data) {
      commit("setToolData",data);
      commit("setCacheView",data);
    },
    clearToolBar({commit},data){
      commit("clearToolItem",data.detail);
    },
    clearCache({commit},data){
      commit("clearCacheView",data);
    }
  }
}

入口文件缓存路由

在 App.vue 入口文件,使用 keep-alive 对匹配的路由组件进行缓存,监听当前路由变化,添加缓存路由和标签。

<template>
  <el-main style="position:relative;margin-top:45px;">
    <!--渲染标签的地方-->
    <ToolBar></ToolBar>
    <div class="routeWrap">
      <transition name="fade-transform">
        <keep-alive :include="cachedViews">
          <router-view></router-view>
        </keep-alive>
      </transition>
    </div>
  </el-main>
 </template>
 <script>
  export default {
    watch: {
      $route() {
      // 路由组件名称(自定义)
       const componentName =this.$route.matched[0]["components"]["default"][ "name"];
       const detail = this.$route.path;
       // 当前路由匹配到name
       const name = this.$route.meta[0]["name"];
       this.$store.dispatch("commitToolBar", { name, detail, componentName });
      }
    }
  }
 </script>

ToolBar代码

这里使用了 elementui 的 el-tag 标签, el-tag 标签带有动画、关闭按钮、主题color等属性, close 函数是清除该标签和清除缓存路由(已访问过)。 click 主要是当对该标签项点击操作,则切换到该路由页面。其中 active 是该标签匹配到当前路由时候处于激活状态(颜色高亮), el-tag 的动画比较生硬,所以关闭了。

<template>
 <div class="toolbar">
  <el-tag
   class="toolItem"
   type="info"
   :disable-transitions="false"
   :closable="item.id != 0"
   effect="plain"
   v-for="(item,index) in getToolData"
   :key="index"
   :class="{active:$route.path == item.detail}"
   @click="redirect(item)"
   @close="closeToolItem(item)"
  >
   <span class="dot" v-if="$route.path == item.detail"></span>
   {{item.name}}
  </el-tag>
 </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
 methods: {
  closeToolItem(item, index) {
   this.$store.dispatch("clearToolBar", item);
   this.$store.dispatch("clearCache", item.componentName);
  },
  redirect(item) {
   this.$router.push({ path: item.detail });
  }
 },
 computed: {
  ...mapGetters(["getToolData", "getCacheView"])
 }
};
</script>

生命周期 activated 和 deactivated

采用了 keep-alive 缓存的路由组件,重新进入该路由,路由组件不会重新创建,所以也就不会触发组件的生命周期函数(比如说 beforeCreate 、 mounted 等)。所以在对该页面进行数据更新或者清除数据。 vue 为我们提供了 activated 和 deactivated 生命周期函数,当重新进入路由组件会触发 activated 函数,离开则会触发 deactivated 。

<template>
  <div> A page</div>
</template>
<script>
  export default {
    data(){
      return {
        form :{
          name:'',
          password:''
        }
      }
    },
    activated(){
      this.getList()
    },
    deactivated(){
      Object.keys(this.form).map(key => {
        this.form[key] = ''
      })
    }
  }
</script>

总结

以上所述是小编给大家介绍的vuex + keep-alive实现tab标签页面缓存问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
巧用局部变量提升javascript性能
Feb 24 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 Javascript
Weex开发之地图篇的具体使用
Oct 16 #Javascript
WEEX环境搭建与入门详解
Oct 16 #Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 #Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 #Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 #Javascript
关于JS模块化的知识点分享
Oct 16 #Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 #Javascript
You might like
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
如何在node的express中使用socket.io
2014/12/15 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
linux面试题参考答案(7)
2014/07/24 面试题
印刷工程专业应届生求职信
2013/09/29 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
公司节能减排倡议书
2014/05/14 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
西安导游词
2015/02/12 职场文书
行政答辩状范文
2015/05/21 职场文书
酒桌上的开场白
2015/06/01 职场文书
instantclient客户端 连接oracle数据库
2022/04/26 Oracle
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang