keep-alive與路由器切換問題

問題描述

每個頁面通過computed和watch監測vuex參數，在參數變化時請求ajax更新數據。
在公共組件改變參數時，所有頁面都會去重新請求數據，當前頁面根據數據重新渲染，但切換回其他頁面時，由於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})

解決方法一

第一步：判斷此時路由是否是當前頁面，避免多餘的數據請求，只有當前頁面重新請求數據

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

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

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

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

解決方法二

在vue爲每一個頁面存儲一個公共組件參數,使個頁面參數相互不干擾，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})