进阶版:vue vuex+keep-alive进阶用法(灵活缓存页面,主要是移动端)_余温无痕的博客-CSDN博客
vue3 keep-alive+vuex配合使用(简单易用)_余温无痕的博客-CSDN博客
一、应用场景:
在开发中经常有从列表跳到详情页,然后返回详情页的时候需要缓存列表页的原来数据以及滚动位置,这个时候就需要保存状态,要缓存状态。
概括来讲:
1、列表页面 ——进入详情页 —— 后退到列表页(缓存列表页的原来数据以及滚动位置)
2、重新进入列表页面,获取最新的数据
二、如何使用
在vue2.1.0版本之后的使用方法(推荐方法)
1、创建router实例的时候加上scrollBehavior方法
//在router中的index.js
const router = new VueRouter({
mode: 'hash',
base: process.env.BASE_URL,
routes,
scrollBehavior(to,from,savedPosition){
if (savedPosition){
return savedPosition
}else{
return{
x:0,
y:0
}
}
}
})
2、在store里加入需要缓存的的组件的变量名,和相应的方法
export default new Vuex.Store({
state: {
includeList:[]
},
mutations: {
get_include(state,data){
state.includeList = data;
}
})
3、在App.vue中
<!-- include 需要缓存的组件 -->
<keep-alive :include="includeList">
<router-view />
</keep-alive>
<script>
import { mapState } from 'vuex';
export default {
name: 'App',
data() {
return {
}
},
computed: {
...mapState(['includeList'])
},
created() {
}
}
</script>
4、在beforeRouteLeave钩子函数里控制需要缓存的组件
注意beforeRouteLeave导航守卫是必须写在当前单页面中,不能写在App.vue中
beforeRouteLeave(to, from, next) {
//跳转到详情页时缓存当前列表页,反之不缓存
if (to.path === '/GoodDetail') {
this.$store.commit('get_include', ['Home'])
} else {
this.$store.commit('get_include', [])
}
next()
},
此方法将需要缓存的组件保存到全局变量,可以在路由的钩子函数里灵活的控制哪些组件需要缓存,那些不需要缓存,不需要每次再重新初始化数据,但是需要在vuex中保存数据;
在vue2.1.0版本之前使用方法
1、meta标签中记录keepAlive的属性为true
2、 创建router实例的时候加上scrollBehavior方法
//在router中的index.js
const router = new VueRouter({
mode: 'hash',
base: process.env.BASE_URL,
routes,
scrollBehavior(to,from,savedPosition){
if (savedPosition){
return savedPosition
}else{
return{
x:0,
y:0
}
}
}
})
3、在App.vue中
//App.vue中
<keep-alive>
<router-view v-if='$route.meta.keepAlive'></router-view>
</keep-alive>
<router-view v-if='!$route.meta.keepAlive'></router-view>
4、有些情况下需要缓存有些情况下不需要缓存,可以在缓存的组件里的路由钩子函数中做判断
注意beforeRouteLeave导航守卫是必须写在当前单页面中,不能写在App.vue中
beforeRouteLeave (to, from, next) {
if (to.path === '/goodDetail') {
from.meta.keepAlive = true
} else {
from.meta.keepAlive = false
// this.$destroy()
}
next()
},
但是这种方法有bug,首先第一次打开页面的时候并不缓存,即第一次从列表页跳到详情页,再回来并没有缓存,后面在进入详情页才会被缓存。
并且只会缓存第一次进入的状态,不会重新请求数据,如果当页面A选中一个分类跳到B页面,再从B列表页面跳往详情页,此时会缓存这个状态,并且以后再从A页面的其他分类跳到B页面都不会重新被缓存,以至于每次从详情页返回B页面都会跳第一次缓存的状态;当你的项目只有一种状态需要缓存,可以考虑使用这种方法