使用keep-alive時(shí),數(shù)據(jù)無(wú)法刷新的問(wèn)題及解決

更新時(shí)間：2023年07月04日 10:13:17 作者：碎碎。

這篇文章主要介紹了使用keep-alive時(shí),數(shù)據(jù)無(wú)法刷新的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用keep-alive時(shí),數(shù)據(jù)無(wú)法刷新問(wèn)題

keep-alive 相關(guān)內(nèi)容

概念： <keep-alive> 是Vue的一個(gè)內(nèi)部組件，適合用來(lái)緩存不需要實(shí)時(shí)更新的組件，這樣可以保留組件狀態(tài)避免重新渲染。

Props：

include：接受字符串或正則表達(dá)式，這里是需要被緩存的組件名
exclude：接受字符串或正則表達(dá)式，這里是不需要緩存的組件名
max：接受數(shù)字，最多可以緩存多少組件實(shí)例

問(wèn)題：在需要重新請(qǐng)求數(shù)據(jù)的時(shí)候，依然走的緩存

案例中的部分源碼：

問(wèn)題描述：這個(gè)項(xiàng)目是一個(gè)后臺(tái)管理系統(tǒng)，由于很多組件都有走緩存的原因，導(dǎo)致在更換賬戶(hù)之后，數(shù)據(jù)依然走的緩存，并沒(méi)有加載新的數(shù)據(jù)，從而賬戶(hù)雖然已經(jīng)更換，但是現(xiàn)實(shí)的內(nèi)容還是上一個(gè)賬戶(hù)下的內(nèi)容，這時(shí)候在network也會(huì)發(fā)現(xiàn)，除了之前請(qǐng)求的數(shù)據(jù)，就沒(méi)有新數(shù)據(jù)請(qǐng)求的記錄了

解決方案：

方案1： 如果要在進(jìn)入頁(yè)面的時(shí)候獲取最新的數(shù)據(jù)，需要在activated階段獲取數(shù)據(jù)，承擔(dān)原來(lái)created鉤子中獲取數(shù)據(jù)的任務(wù)(親測(cè)，時(shí)而有效，時(shí)而無(wú)效，不知道是什么原因)。

方案2： 在賬戶(hù)登錄之后調(diào)用 **window.location.reload() **，起到重新請(qǐng)求的作用（已親測(cè)）

方案3： 在vuex中設(shè)置狀態(tài)，動(dòng)態(tài)綁定 include 值，在登錄的時(shí)候緩存需要緩存的組件，在退出的時(shí)候，清除需要刷新的組件（效果很理想，也順帶解決了加載數(shù)據(jù)時(shí)，數(shù)據(jù)閃現(xiàn)的情況）

//--------------------- VUEX ----------------------------
const state = {
  keepAliveList: 'login,index,productionList,characterList,dynamicList,QAList,fansList'// 需要緩存的頁(yè)面
}
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中統(tǒng)一監(jiān)控----------------
computed: {
    keepAliveList () {
      if (this.$store.getters.keepAliveListState) {
        return this.$store.getters.keepAliveListState
      }
    }
  },
  //--------------------- 在退出的時(shí)候，提交removeAliveList ---------------
  this.$store.commit('removeAliveList')
  //--------------------- 在登錄的時(shí)候，提交KeepAliveListState ---------------
  this.$store.commit('KeepAliveListState')

keep-alive數(shù)據(jù)刷新問(wèn)題

有時(shí)候?qū)崟r(shí)數(shù)據(jù)需要刷新但由于緩存會(huì)顯示之前的數(shù)據(jù) 用戶(hù)點(diǎn)擊之后會(huì)報(bào)錯(cuò)：

處理方式如下

（1）在vuex中設(shè)置狀態(tài)，動(dòng)態(tài)綁定 include 值，在登錄的時(shí)候緩存需要緩存的組件，在退出的時(shí)候，清除需要刷新的組件（效果很理想，也順帶解決了加載數(shù)據(jù)時(shí)，數(shù)據(jù)閃現(xiàn)的情況）或者exclude寫(xiě)入不緩存的

（2）放在actived中獲取數(shù)據(jù)

（3）