详解keep-alive + vuex 让缓存的页面灵活起来


Posted in Javascript onApril 19, 2019

引入

在使用vue + vue-router开发SPA的时候,有没有遇到过这样的情况:当我们在列表页和详情页之间切换的时候,如果列表页不做缓存,会导致每次从详情页返回时,列表页都会重新加载。如下图:

详解keep-alive + vuex 让缓存的页面灵活起来

细心的朋友已经发现了,当从详情页返回列表页的时候,列表页重载了,这样的体验显然不好,这时我们可以对列表页进行缓存处理。

keep-alive实现页面缓存

我们的项目不一定所有页面都需要做缓存处理,所以这里介绍两种按需缓存的方法:

方法一:

首先在定义路由的时候配置 meta 字段,自定义一个KeepAlive字段作为该页面是否缓存的标记:

routes:[{
 path: '/search',
 name: 'search',
 component: search,
 meta: {
  title: '搜索列表页',
  keepAlive: true // 标记列表页需要被缓存
 }
},
{
 path: '/detail',
 name: 'detail',
 component: detail,
 meta: {
  title: '详情页',
  // 详情页不需要做缓存,所以不加keepAlive标记
 }
}]

由于<keep-alive>组件不支持v-if指令,所以我们在App.vue中采用两个<router-view>的写法,通过当前路由的keepAlive字段来判断是否对页面进行缓存:

<div id="app">
 <keep-alive>
  <router-view v-if="$route.meta.keepAlive" />
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive" />
</div>

方法二

使用<keep-alive>提供的 exclude 或者 include 选项,此处我们使用 exclude ,在App.vue中:

<div id="app">
 <keep-alive exclude="detail">
  <router-view />
 </keep-alive>
</div>

需要注意的是,一定要给页面组件加上相应的name,例如在detail.vue中:

<script>
export default {
 name: 'detail', // 这个name要和keep-alive中的exclude选项值一致
 ...
}
</script>

这么写就代表了在项目中除了name为detail的页面组件外,其余页面都将进行缓存。

特殊情况优化:

如果详情页也做了keep-alive,那么列表页和详情页切换时,滚动位置可能会相互影响,这时需要在 Router 实例中提供一个 scrollBehavior 方法:

export default new Router({
 scrollBehavior (to, from, savedPosition) {
 	if (savedPosition) {
 		return savedPosition
 	} else {
 		return { x: 0, y: 0 }
 	}
 },
 routes: [...],
})

效果展示

详解keep-alive + vuex 让缓存的页面灵活起来

效果看似很不错,实现了列表页的缓存。但这其实并不灵活,比如返回首页再进入这个搜索页的时候,由于没做任何处理,所以这个搜索页它仍处于之前的状态:

详解keep-alive + vuex 让缓存的页面灵活起来

然而,我希望凡是从首页进入搜索页,页面数据都需要重置回初始状态,有没有什么方可以灵活控制页面数据是否需要重置呢?这时我的脑海里浮现了vue生态系统中的状态管理库vuex。

借助vuex使页面更灵活

需求分析: 我们需要一个全局的flag来控制每次进入缓存页时,数据是否需要重置,正好vuex能做到。

vuex搞起来

安装

npm install vuex --save

 配置vuex

为了方便日后维护,可以创建一个store目录专门存放vuex的模块代码,目录结构参考下图:

详解keep-alive + vuex 让缓存的页面灵活起来

state.js:

const state = {
 refreshSearch: true // 标记是否刷新搜索页
}

export default state

mutation.js

const matutaions = {
 setRefreshSearch(state, flag) {
  state.refreshSearch = flag
 }
}
 
export default matutaions

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
 state,
 mutations
})

在入口文件main.js中:

import store from './store' //这里是指向store目录中的index.js
new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

这样,我们就相当于用vuex创建了一个用来判断页面是否需要重置的标记了。

为所欲为地重置你的缓存页中的数据

在哪里重置

keep-alive的组件有个特有的生命周期钩子activated()。activated()会在keep-alive的组件每次激活时调用,而created()只有创建的时候会被调用一次,再次激活就不会被调用了。所以这里我们需要在activated()钩子中重置我们的页面数据。

 在activated()中想重置就重置

这里要借助vuex中的refreshSearch标记来判断是否需要重置

search.vue:(这个是需要缓存的页面)

<script>
import {mapState, mapMutations} from 'vuex' //vuex提供的映射函数,用来简化代码的
export default {
  activated() {
    if (this.refreshSearch) {
      // 若为true,则执行重置页面等相关操作
      this.fetchData();
    } else {
      this.reset(true);
    }
  },
  methods:{
    fetchData() {
      // 获取页面数据
    },
    ...mapMutations({
      reset: 'setRefreshSearch' // 将 `this.reset()` 映射为 `this.$store.commit('setRefreshSearch')`
    })
  },
  computed: {
    ...mapState([
      'refreshSearch' // 映射 this.refreshSearch 为 this.$store.state.refreshSearch
    ]),
  }
}
</script>

当我们从搜索页去详情页时,希望搜索页缓存,只需要把标记设为false:

methods: {
  goDetail() {
    this.reset(false) // 这样返回搜索页的时候,搜索页就不会重置数据了
    this.$router.push({path: '/detail'})
  },
  ...mapMutations({
    reset: 'setRefreshSearch'
  })
}

当我们从首页去搜索页时,希望搜索页数据重置,只需把标记设为true:

methods: {
  goSearch() {
    this.reset(true) // 这样去搜索页时数据就会被重置了
    this.$router.push({path: '/search'})
  },
  ...mapMutations({
    reset: 'setRefreshSearch'
  })
}

效果预览

详解keep-alive + vuex 让缓存的页面灵活起来

总结

本文介绍了按需使用keep-alive,以及借助vuex来控制keep-alive的组件页面的数据是否需要重置刷新,希望对大家有帮助。

附送相关知识传送门:

vue内置组件keep-alive

vue-router滚动行为

生命周期钩子activated

vuex状态管理库

以上所述是小编给大家介绍的keep-alive + vuex 让缓存的页面灵活起来详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如何学习Javascript入门指导
Nov 01 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
理解javascript正则表达式
Mar 08 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 #Javascript
基于javascript的拖拽类封装详解
Apr 19 #Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 #Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 #Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 #Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 #Javascript
浅谈Javascript中的对象和继承
Apr 19 #Javascript
You might like
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
php如何连接sql server
2015/10/16 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
jQuery知识点整理
2015/01/30 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
JavaScript中this详解
2015/09/01 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
Python素数检测实例分析
2015/06/15 Python
详解Django配置优化方法
2019/11/18 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
2014年医院党建工作总结
2014/12/20 职场文书
挂靠协议书
2015/01/27 职场文书
新课程改革心得体会
2016/01/22 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers