Vue2 + Vuex 实现页面跳转时的状态监听与处理

在开发 Vue 应用中，我们常常会遇到这样一种场景：从一个页面跳转到另一个页面时，需要传递一些状态信息，并在目标页面根据这些状态执行特定的逻辑处理。

例如，用户在一个列表页修改了某些参数后跳转到详情页，详情页需要根据这些参数来决定是否加载不同的数据或展示不同的 UI 状态。

一、场景描述

我们有如下两个页面：

PageA（来源页） ：用户在此页面修改了 Vuex 中的 currentPage 值。
PageB（目标页） ：当用户从 PageA 跳转过来时，需要监听这个 currentPage 值的变化，并根据其值执行相应的初始化逻辑，之后将其置空以避免影响其他非特殊跳转的情况。

二、问题分析：为什么 Vue2 中不能直接使用 watch 监听 Vuex 的 state？

❌ 错误做法示例：

js 复制代码

watch: {
  '$store.state.event.currentPage': function(newVal) {
    // 处理逻辑
  }
}

虽然看起来语法没有问题，但实际上 Vue2 的响应式系统无法追踪嵌套对象属性的变化 ，尤其是在使用 $store.state.xxx 这种方式时。

🔍 原因解析：

Vue2 的响应式系统基于 Object.defineProperty，它只能监听对象属性的读写操作，而不能自动追踪深层次的引用。
$store.state 是一个 Vuex Store 的根对象，Vue 并不会自动把它变成响应式的。
因此，this.$store.state.event.currentPage 在 watch 中被视为一个"字符串路径"，并不会触发 Vue 的依赖收集机制。

三、正确做法：使用 computed 属性进行代理

为了解决上述问题，我们可以借助 Vue 的 computed 属性来"代理"我们需要监听的 Vuex 状态。

✅ 正确代码如下：

js 复制代码

computed: {
  currentPage() {
    return this.$store.state.event.currentPage;
  }
},
watch: {
  currentPage(newVal) {
    if (newVal) {
      // 执行你的业务逻辑
      console.log('当前页面来自特殊跳转，current page:', newVal);
      
      // 处理完成后清空 currentPage
      this.$store.commit('event/setCurrentPage', null);
    }
  }
}

📌 说明：

computed 属性是响应式的，它会自动追踪依赖。
我们把 this.$store.state.event.currentPage 暴露为一个计算属性，这样 Vue 就能感知它的变化。
在 watch 中监听这个计算属性，就能准确捕获到 Vuex 状态的变化。

四、拓展：Vue3 是否可以直接监听 Vuex 的值？

在 Vue3 中，情况有所改变。

✅ Vue3 支持更强大的响应式系统（基于 Proxy）

Vue3 使用 Proxy 替代了 Object.defineProperty，可以更灵活地追踪对象及其嵌套属性的变化。
因此，在 Vue3 中，你可以尝试直接监听 $store.state 中的某个值，但仍然建议使用 computed 来确保兼容性和可维护性。

示例（Vue3）：

js 复制代码

watch(
  () => store.state.event.currentPage,
  (newVal) => {
    if (newVal) {
      // 处理逻辑
      store.commit('event/setCurrentPage', null);
    }
  }
)

或者使用 Options API：

js 复制代码

watch: {
  '$store.state.event.currentPage'(newVal) {
    // ...
  }
}

⚠️ 注意：即使 Vue3 可以支持这种写法，也并不推荐在所有情况下都这么做。使用 computed 属性仍然是更清晰、更符合响应式设计思想的方式。

五、进阶实践：封装监听逻辑为 Mixin 或 Hook（Vue3 Composition API）

为了复用逻辑，我们可以将这类监听行为封装成一个 mixin（Vue2）或 hook（Vue3）。

Vue2 Mixin 示例：

js 复制代码

// mixins/listenCurrentPageMixin.js
export default {
  computed: {
    currentPage() {
      return this.$store.state.event.currentPage;
    }
  },
  watch: {
    currentPage(newVal) {
      if (newVal) {
        this.handleSpecialJump(newVal);
        this.$store.commit('event/setCurrentPage', null);
      }
    }
  },
  methods: {
    handleSpecialJump(page) {
      // 子组件可重写此方法
      console.log('Handling special jump to page:', page);
    }
  }
}

然后在组件中引入：

js 复制代码

import listenCurrentPage from '@/mixins/listenCurrentPageMixin';

export default {
  mixins: [listenCurrentPage],
  methods: {
    handleSpecialJump(page) {
      // 自定义逻辑
    }
  }
}

六、总结

项目	Vue2	Vue3
是否可直接 watch `$store.state.xxx`	❌ 不推荐	✅ 可行但不推荐
推荐做法	使用 computed + watch	使用 computed 或 watchEffect
复用逻辑	Mixin	Hook / Custom Composable

七、最佳实践建议

永远使用 computed 属性来暴露你需要监听的 Vuex 状态。
监听 computed 属性而非直接监听 store.state。
处理完状态后及时清空，避免污染后续流程。
使用 mixin 或 custom hook 提高代码复用率和可维护性。

📌 参考资料：