快捷導(dǎo)航

解決VUE3 keep-alive頁面切換報錯parentComponent.ctx.deactivate

更新時間：2023年10月11日 14:28:18 作者：程序Ms_Wqh

這篇文章主要介紹了解決VUE3 keep-alive頁面切換報錯parentComponent.ctx.deactivate is not a function的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue3 keep-alive頁面切換報錯：parentComponent.ctx.deactivate is not a function

問題

我們使用判斷時有時候會報錯

        <router-view v-slot="{ Component }">
          <keep-alive >
            <component :is="Component" v-if="$route.meta.keepAlive" />
          </keep-alive>
          <component :is="Component"  v-if="!$route.meta.keepAlive" />
        </router-view>
        //keepAlive是在路由里邊定義的meta字段 true/false

解決

這個時候我們只需在 <component> 標(biāo)簽上添加 :key=" 唯一值" 就可以解決了，只要是唯一的就可以沒有指定要求推薦使用 $route.name

        <router-view v-slot="{ Component }">
          <keep-alive >
            <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
          </keep-alive>
          <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
        </router-view>

vue頁面切換keep-alive導(dǎo)致的數(shù)據(jù)問題

問題描述

每個頁面通過computed和watch監(jiān)測vuex參數(shù)，在參數(shù)變化時請求ajax更新數(shù)據(jù)。

在公共組件改變參數(shù)時，所有頁面都會去重新請求數(shù)據(jù)，當(dāng)前頁面根據(jù)數(shù)據(jù)重新渲染，但切換回其他頁面時，由于keep-alive，頁面沒有變化。

//vuex  store.js
const state = {
	classes: "",
 	day: "",
}
const mutations = {
  updateClasses(state,payload) {
    state.classes=payload
  },
  updateDay(state,payload) {
    state.day=payload
  },
}
//vue  computed
 classes() {
  return this.$store.state.classes
 },
 day() {
   return this.$store.state.day
 },
 //vue  watch
classes(val) {
    this.updateClassChange()//ajax請求
},
day(val) {
    this.updateDayChange()//ajax請求
}
//公共組件
this.$store.commit('updateClasses', {this.classs})
this.$store.commit('updateDay', {this.day})

解決方法一

第一步：判斷此時路由是否是當(dāng)前頁面，避免多余的數(shù)據(jù)請求，只有當(dāng)前頁面重新請求數(shù)據(jù)

watch: {
  classes(val) {
    if(this.$route.name=="index") {
      this.updateClassChange()
    }
  },
  day(val) {
    if(this.$route.name=="index") {
      this.updateDayChange()
    }
  }
},

第二部：是用鉤子函數(shù)activated，每切換路由時重新加載，避免參數(shù)變化時頁面沒有變化

activated() {
 if(this.$route.name=="index"){
     this.init()
   }
 },

該方案問題：參數(shù)不變時，雖然不重新渲染，但每次切換路由也會重新請求

解決方法二

在vue為每一個頁面存儲一個公共組件參數(shù),使個頁面參數(shù)相互不干擾，keep-alive也不混亂

//vuex  store.js
const state = {
	classesObj:{
    index:"",
    addict:"",
    consume:"",
    mental:""
  },
  dayObj:{
    index:"",
    addict:"",
    consume:"",
    mental:""
  },
}
const mutations = {
 setClassesObj(state,payload){
    if(payload.index){
      state.classesObj.index=payload.index
    }
    if(payload.addict){
      state.classesObj.addict=payload.addict
    }
    if(payload.consume){
      state.classesObj.consume=payload.consume
    }
    if(payload.mental){
      state.classesObj.mental=payload.mental
    }
  },
  setDayObj(state,payload){
    if(payload.index){
      state.dayObj.index=payload.index
    }
    if(payload.addict){
      state.dayObj.addict=payload.addict
    }
    if(payload.consume){
      state.dayObj.consume=payload.consume
    }
    if(payload.mental){
      state.dayObj.mental=payload.mental
    }
  },
}
//vue  computed
classes() {
  return this.$store.state.classesObj[this.$route.name]
},
day() {
  return this.$store.state.dayObj[this.$route.name]
},
 //vue  watch
classes(val) {
    this.updateClassChange()//ajax請求
},
day(val) {
    this.updateDayChange()//ajax請求
}
//公共組件
this.$store.commit('setClassesObj', {[this.$route.name]:this.classs})
this.$store.commit('setDayObj', {[this.$route.name]:this.day})