Vue.js 中监听 Vuex state 需通过 computed 创建响应式连接再用 watch 监听，或使用 store.subscribe/subscribeAction 全局订阅，Pinia 则支持直接 watch store 属性，更简洁高效。
Vue.
js
中不能直接用
监听 Vuex 的 state，因为 Vuex 的 state 是响应式对象，但它的顶层属性默认不是响应式引用（尤其在 Vue 3 + Pinia 或 Vuex 4 的 setup 模式下更明显）。要实现“监听 Vuex 状态变化”并支撑多组件通信，核心思路是：把 store 数据以响应式方式暴露给组件，再用标准 watch 机制监听。
使用 computed + watch 组合监听 Vuex state
这是最通用、兼容 Vue 2 / Vue 3（Vuex 3/4）的方式。通过
或
从 store 获取状态，再用
观察其变化：
Vue 2（Options API）中，用
映射到
，再在
中监听该计算属性
Vue 3（Composition API）中，在
里用
创建响应式引用，再传给
注意：必须监听
返回的 ref 或 getter，不能直接
—— 后者不是响应式连接
利用 Vuex 的 subscribe 或 subscribeAction 做全局状态响应
当需要跨组件执行副作用（如日志、路由跳转、通知），不依赖具体组件实例时，推荐用 store 的订阅机制：
：监听所有 mutation，适合追踪 state 变化源头
：监听 action 执行完成，更适合业务逻辑解耦
订阅函数在 store 初始化后注册（如 main.js 或 store/index.js），天然支持多组件共享监听逻辑
用事件总线或 provide/inject 实现轻量级多组件通信
如果只是少数组件之间需响应同一状态变更，且不想强耦合 Vuex，可结合响应式数据做中介：
php版微信js-sdk支付接口类
php版微信js-sdk支付接口类
下载
立即学习
“
前端免费学习笔记（深入）
”；
创建一个
，在 store 的 mutation 中同步更新它
各组件通过
获取该响应式对象，再用
监听其属性
或用 mitt / tiny-emitter 封装一个全局事件总线，在 mutation 提交后
这种方式避免每个组件都读取 store，减少依赖，也便于单元测试
升级建议：优先考虑 Pinia 替代 Vuex
Piina 是 Vue 官方推荐的状态管理库，天然适配 Composition API，监听更简洁：
store 本身是响应式对象，可直接
支持 store.$subscribe()，比 Vuex 的 subscribe 更语义化、支持深度监听选项
多组件共享同一 store 实例，无需额外封装，代码更扁平、调试更直观
不复杂但容易忽略的是：监听目标必须是响应式连接后的值，而不是原始 state 属性。选对方式，既能精准响应变化，又能保持组件解耦和可维护性。
watchmapStatecomputedwatchmapStatecomputedwatchsetupcomputed(() => store.state.xxx)watchcomputedwatch(store.state.xxx)store.subscribe((mutation, state) => {...})store.subscribeAction({ after: (action, state) => {...} })const sharedState = reactive({ count: 0 })provide/injectwatchemitter.emit('state-updated', payload)watch(() => store.count, ...)