详解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 相关文章推荐
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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
php静态文件生成类实例分析
2015/01/03 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
php+js实现倒计时功能
2014/06/02 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
用Python输出一个杨辉三角的例子
2014/06/13 Python
详解在Python程序中使用Cookie的教程
2015/04/30 Python
Python中几个比较常见的名词解释
2015/07/04 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
python统计中文字符数量的两种方法
2019/01/31 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
python实现大学人员管理系统
2019/10/25 Python
pygame实现五子棋游戏
2019/10/29 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
python使用smtplib模块发送邮件
2020/12/17 Python
佳能法国商店:Canon法国
2019/02/14 全球购物
给护士表扬信
2014/01/19 职场文书
英语生日邀请函
2014/01/23 职场文书
作文评语集锦大全
2014/04/23 职场文书
创新社会管理心得体会
2014/09/12 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
合作意向书怎么写
2019/06/24 职场文书