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 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
php 修改密码实现代码
May 24 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
如何用JavaScript学习算法复杂度
Apr 30 Javascript
一文搞懂redux在react中的初步用法
Jun 09 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
第三节--定义一个类
2006/11/16 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
jquery 使用点滴函数代码
2011/05/20 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
python sys.argv[]用法实例详解
2018/05/25 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
python创建学生管理系统
2019/11/22 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
教师党员一句话承诺
2014/03/28 职场文书
社区服务标语
2014/07/01 职场文书
财务工作失误检讨书
2015/02/19 职场文书
工作简报格式范文
2015/07/21 职场文书
六年级情感作文之500字
2019/10/23 职场文书
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL