(Vue3) 监听 watch、Pinia $subscribe

watch:  适用于组件内部或组合函数中对某些响应式数据进行监听。

场景：监听某个 ref 或 reactive 属性

const count = ref(0);

watch(count, (newVal, oldVal) => {
  console.log('count changed:', newVal);
});

场景：监听多个源

watch([() => firstName.value, () => lastName.value], ([newFirst, newLast]) => {
  console.log('名字变了');
});

$subscribe: 适用于全局状态追踪、日志记录、调试等场景。

场景：监听整个 Store 的变化

store.$subscribe((mutation, state) => {
  console.log('Store 发生了变化', mutation);
});

场景：只监听特定字段

store.$subscribe((mutation, state) => {
  if (mutation.type === 'direct' && 'value' in mutation.payload) {
    console.log('value 被修改为：', mutation.payload.value);
  }
});

小结

• watch 更轻量、灵活，适合组件内部监听响应式数据。
• $subscribe 是 Pinia 提供的专门用于监听 Store 状态变化的方法，适合全局状态管理。
• 如果只是想监听一个组件内的值变化，优先使用 watch；
• 如果你想统一处理 Store 的更新逻辑（如日志、持久化、事件广播），优先使用 $subscribe。