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')

推荐博文：https://www.cnblogs.com/sysuhanyf/p/7454530.html