Vue状态管理中监听Store变化需区分响应式与非响应式数据源：用computed+watch监听基础状态，深度监听需deep:true，数组变更推荐watch计算属性副本，跨模块用store.$subscribe。

在 Vue 状态管理中监听 Store 的变化，核心在于区分响应式机制与非响应式数据源。Vuex（Vue 2）和 Pinia（Vue 3 推荐）的 store 本身不自动让所有 state 属性具备响应式监听能力——尤其是直接访问 store.state.xxx 或嵌套对象属性时，容易漏掉更新或监听失效。

用 computed + watch 监听基础状态

这是最常用、最稳妥的方式，适用于简单值、数组或浅层对象：

• 先通过 computed 包裹 store 数据，确保它是响应式引用；
• 再用 watch 监听该计算属性，避免直接监听原始 state 路径；
• 对 Vuex：推荐配合 mapState 或 this.$store.state.xxx 封装进 computed；
• 对 Pinia：直接使用 store.xxx 即可，它本身就是响应式 ref。

示例（Vue 3 + Pinia）：

<script setup>
import { watch } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

// 直接监听响应式属性
watch(
  () => userStore.profile,
  (newVal, oldVal) => {
    if (newVal?.id !== oldVal?.id) console.log('用户资料已切换')
  }
)
</script>

深度监听嵌套对象或 reactive 结构

当 store 中的状态是 reactive({ a: { b: 1 } }) 类型，或你手动用了 reactive 管理局部状态，普通 watch 不会触发内部属性变更：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

立即学习“前端免费学习笔记（深入）”；

• 必须启用 deep: true 选项；
• 或者改用 getter 函数形式监听具体路径，如 () => store.config.theme.color；
• 注意：deep: true 有性能开销，仅在必要时开启，尤其避免监听大型对象。

错误写法：
watch(store.config, cb) // config 是 reactive 对象，但未设 deep
正确写法：
watch(() => store.config.theme, cb, { deep: true })

监听数组内容变化（增删改）

数组 length 变化或 push/pop 能被默认捕获，但 arr[0] = xxx 这类索引赋值不会触发响应（Vue 2/3 均如此）：

• 推荐用 watch 配合 deep: true 监听整个数组；
• 或监听计算属性返回的数组副本（如 computed(() => [...store.list])），更可控；
• Vuex 场景下，建议 mutations 统一修改数组，并在 commit 后由组件 watch 计算属性响应。

跨模块或副作用场景用 store.subscribe

不依赖组件上下文、需全局响应状态变更时（例如日志、缓存同步、权限跳转），优先用 store 自带的订阅机制：

• Pi nia：使用 store.$subscribe((mutation, state) => {...})；
• Vuex：使用 store.subscribe((mutation, state) => {...})，可按 mutation.type 精准过滤；
• 注意：这类监听不经过 Vue 响应式系统，不能触发视图更新，只适合副作用逻辑。