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

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

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

Props：

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

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

案例中的部分源碼：

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

解決方案：

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

方案2： 在賬戶登錄之后調(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'// 需要緩存的頁面
}
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ù)刷新問題

有時(shí)候?qū)崟r(shí)數(shù)據(jù)需要刷新但由于緩存會(huì)顯示之前的數(shù)據(jù) 用戶點(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寫入不緩存的

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

（3）

tips：

beforeRouteEnter --> created --> mounted --> activated --> deactivated

再次進(jìn)入緩存的頁面，只會(huì)觸發(fā)beforeRouteEnter -->activated --> deactivated 。created和mounted不會(huì)再執(zhí)行。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論