【bug】【vue】页面切换keep-alive导致的数据问题

原创已于 2023-08-29 16:06:03 修改 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vuex #keep-alive

于 2019-12-10 16:01:55 首次发布

前端同时被 2 个专栏收录

19 篇文章

订阅专栏

bug

9 篇文章

订阅专栏

本文介绍如何在Vue项目中利用Vuex状态管理和组件的watch特性来解决因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})