使用keep-alive时,数据无法刷新的问题及解决
作者：碎碎。
使用keep-alive时,数据无法刷新问题
keep-alive 相关内容
概念： <keep-alive> 是Vue的一个内部组件，适合用来缓存不需要实时更新的组件，这样可以保留组件状态避免重新渲染。
Props：
include：接受字符串或正则表达式，这里是需要被缓存的组件名exclude：接受字符串或正则表达式，这里是不需要缓存的组件名max：接受数字，最多可以缓存多少组件实例
问题：在需要重新请求数据的时候，依然走的缓存
案例中的部分源码：
问题描述：这个项目是一个后台管理系统，由于很多组件都有走缓存的原因，导致在更换账户之后，数据依然走的缓存，并没有加载新的数据，从而账户虽然已经更换，但是现实的内容还是上一个账户下的内容，这时候在network也会发现，除了之前请求的数据，就没有新数据请求的记录了
解决方案：
方案1： 如果要在进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务(亲测，时而有效，时而无效，不知道是什么原因)。
方案2： 在账户登录之后调用 **window.location.reload() **，起到重新请求的作用（已亲测）
方案3： 在vuex中设置状态，动态绑定 include 值，在登录的时候缓存需要缓存的组件，在退出的时候，清除需要刷新的组件（效果很理想，也顺带解决了加载数据时，数据闪现的情况）
//--------------------- VUEX ----------------------------
const state = {
keepAliveList: 'login,index,productionList,characterList,dynamicList,QAList,fansList'// 需要缓存的页面
}
const mutations = {
KeepAliveListState (state) {
state.keepAliveList = 'login,index,productionList,characterList,dynamicList,QAList,fansList'
},
removeAliveList (state) {
state.keepAliveList = 'index'
}
}
const getters = {
keepAliveListState (state) {
return state.keepAliveList
}
}
export default new Vuex.Store({
state,
mutations,
getters
})//--------------------- 在app中统一监控----------------
computed: {
keepAliveList () {
if (this.$store.getters.keepAliveListState) {
return this.$store.getters.keepAliveListState
}
}
},
//--------------------- 在退出的时候，提交removeAliveList ---------------
this.$store.commit('removeAliveList')
//--------------------- 在登录的时候，提交KeepAliveListState ---------------
this.$store.commit('KeepAliveListState')keep-alive数据刷新问题
有时候实时数据需要刷新但由于缓存会显示之前的数据 用户点击之后会报错：
处理方式如下
（1）在vuex中设置状态，动态绑定 include 值，在登录的时候缓存需要缓存的组件，在退出的时候，清除需要刷新的组件（效果很理想，也顺带解决了加载数据时，数据闪现的情况） 或者exclude写入不缓存的
（2）放在actived中获取数据
（3）
tips：
beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存的页面，只会触发beforeRouteEnter -->activated --> deactivated 。created和mounted不会再执行。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。