Vue切换路由时依赖Vuex状态的组件不渲染，仅刷新页面显示如何解决？

计算属性仅首次触发、路由切换不更新，本质是top10ModeActivated依赖的Vuex状态没有触发响应式更新，按以下步骤排查修复：

• 第一步：检查Vuex模块的state初始化定义
  Vue2响应式要求对象属性必须在初始化时声明才能被监听，确保moduleSearch的state里已经提前定义了top10ModeActivated属性：

  // moduleSearch.js 模块定义
  const state = () => ({
    // 必须提前声明该属性，不能后续动态追加
    top10ModeActivated: false,
    // 其他state属性
  })
  

  如果之前是后续动态添加的这个属性，要改成初始化声明，特殊场景也可以用Vue.set/this.$set赋值，更推荐提前声明保证响应式正常。

• 第二步：检查Vuex状态修改方式
  所有Vuex的state修改必须通过mutation完成，不能直接在组件里赋值this.$store.state.moduleSearch.top10ModeActivated = true，直接修改不会触发状态更新通知：

  // moduleSearch.js 定义mutation
  const mutations = {
    SET_TOP10_MODE(state, payload) {
      state.top10ModeActivated = payload
    }
  }
  // 组件/其他逻辑修改时调用
  this.$store.commit('moduleSearch/SET_TOP10_MODE', true)
  

• 第三步：排查路由组件缓存问题
  如果路由配置了<keep-alive>缓存组件，路由切换时组件不会重新渲染，计算属性如果依赖没有变化就不会重新计算。可以给组件添加activated生命周期钩子，每次组件激活时主动同步状态，或者给路由配置meta: { noCache: true }关闭该页面的缓存：

  // 组件内添加activated钩子
  activated() {
    // 主动触发一次状态同步，按需调用即可
    this.$store.dispatch('moduleSearch/syncTop10ModeStatus')
  }
  

• 第四步：临时验证方案
  可以把v-if的判断改成直接读取$store.state，验证是否是计算属性的缓存问题：

  <super-visor
    v-if="!$store.state.moduleSearch.top10ModeActivated"
    v-for="cart in getCarts(index + 1)"
    :cart="cart"
    :key="cart.position"
  ></super-visor>
  

  如果修改后正常触发渲染，说明是计算属性的依赖收集异常，回到前两步检查Vuex状态的响应式配置即可。

内容的提问来源于stack exchange，提问作者dmitriversikerq123