快捷導(dǎo)航

解決VUE3 keep-alive頁(yè)面切換報(bào)錯(cuò)parentComponent.ctx.deactivate

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

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

vue3 keep-alive頁(yè)面切換報(bào)錯(cuò)：parentComponent.ctx.deactivate is not a function

問題

我們使用判斷時(shí) 有時(shí)候會(huì)報(bào)錯(cuò)

        <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

解決

這個(gè)時(shí)候我們只需在 <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頁(yè)面切換keep-alive導(dǎo)致的數(shù)據(jù)問題

問題描述

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

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

//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請(qǐng)求
},
day(val) {
    this.updateDayChange()//ajax請(qǐng)求
}
//公共組件
this.$store.commit('updateClasses', {this.classs})
this.$store.commit('updateDay', {this.day})

解決方法一

第一步：判斷此時(shí)路由是否是當(dāng)前頁(yè)面，避免多余的數(shù)據(jù)請(qǐng)求，只有當(dāng)前頁(yè)面重新請(qǐ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í)重新加載，避免參數(shù)變化時(shí)頁(yè)面沒有變化

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

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

解決方法二

在vue為每一個(gè)頁(yè)面存儲(chǔ)一個(gè)公共組件參數(shù),使個(gè)頁(yè)面參數(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請(qǐng)求
},
day(val) {
    this.updateDayChange()//ajax請(qǐng)求
}
//公共組件
this.$store.commit('setClassesObj', {[this.$route.name]:this.classs})
this.$store.commit('setDayObj', {[this.$route.name]:this.day})