keep-alive通过include实现组件缓存

使用keep-alive来解决页面缓存问题如从首页→展示列表数据的组件→展示列表详情的组件，当我们从展示列表详情的组件即详情页面返回到展示列表的组件即列表页面时，我们不希望页面重新进行加载，这样可以减少服务器请求的次数，并且可以保留上次浏览列表数据滚动条的滚动位置，可以使用户可以快速看到自己刚刚浏览过的数据。
这时我们就需要用到 Vue 的keep-alive来解决此类问题，首先我们需要简单的了解一下keep-alive，在vue的2.1.0 版本中，它提供了include和exclude 来允许组件进行有条件的缓存，其中include代表组件能够被缓存即缓存需要的组件,而exclude代表组件不能被缓存即不需要进行缓存的组件（注意：被include或exclude包裹的属性名必须与组件本身的name属性名保持一致，区分大小写）
同时keep-alive 提供了 activated 和 deactivated 这两个函数，activated代表当进入该组件的时候会触发，和created构造函数的区别是created构造函数进入组件如果组件已经被缓存过，那它们只会触发一次，并不会重复触发，而 activated 构造函数则会每次进入组件时，会重复触发。同样deactivated代表当每次离开当前组件的时候会重复触发。下面我们会详细的通过实例来进一步应用。

在列表页面时，我们现在data数据里面定义一个scrollTop,之后我们在activated构造函数中这样写
activated() {
window.addEventListener(“scroll”, this.listenScroll);
document.body.scrollTop = document.documentElement.scrollTop = this.scrollTop;
}
在deactivated这样写
deactivated() {
window.removeEventListener(“scroll”, this.listenScroll);
}
在methods写listenScroll方法
methods: {
listenScroll() {
this.scrollTop =
document.body.scrollTop || document.documentElement.scrollTop;
}
}
这样我们就可以解决刚刚我们说的当从列表页面进入到详情页面时，从详情页面返回到会记录到之前滚动的位置，并且页面不会重新请求数据，但我们发现一个问题，当重新从首页进入到列表页面时，发现列表页面并没有重新刷新数据，即列表页面一直没缓存，这明显和我们所想要实现的不相符，接下来我们就可以使用Vuex来动态的添加需要缓存的组件
首先我们在src文件夹下新建一个store文件夹，该文件夹下新建一个index.js文件，该文件内容如下：
import Vue from “vue”;
import Vuex from “vuex”;

Vue.use(Vuex);

export default new Vuex.Store({
state: {
keepAlive: []
},
mutations: {
setKeepAlive: (state, keepAlive) => {
state.keepAlive = keepAlive;
}
},
getters: {
keepAlive: state => state.keepAlive
}
});

然后在列表组件我们可以通过beforeRouteLeave来是否添加缓存该函数内容如下
beforeRouteLeave(to, from, next) {
if (to.path == “/consultDetail”) {
this.$store.commit(“setKeepAlive”, [“consult”]);
} else {
this.store.commit(“setKeepAlive”, []);
}
next();
},

因为我们所做的案例是移动端H5,并且我们引入了Tabbar该底部组件，所以我们需要在该组件下切换其他底部内容显示的时候修改一下如以下代码
changeSelected(val) {
if(val == “consult”) {
this.$store.commit(‘setKeepAlive’, [‘consult’]) //设置缓存
}
this.selected = val;
},

通过上述操作，我们就可以实现如首页到列表页面到详情页面不缓存，但从详情页面返回到列表页面添加缓存。

如果大家有什么不太懂的地方，欢迎在底部留言，我看到后会进行回复，感谢大家支持！！！