vue3 watch pinia

### 如何在 Vue 3 中使用 `watch` 监听 Pinia Store 的变化

为了监听 Pinia store 中状态的变化，在 Vue 组件内可以通过 `watch` 函数实现这一功能。下面是一个具体的例子，展示了如何设置这种监听器。

首先，确保已经按照说明安装并配置好了 Pinia 和创建了相应的 store 实例[^1]。

接着，在组件内部导入必要的依赖项：

import { defineComponent, watch } from 'vue';
import { useStore } from '@/stores/counter'; // 假设有一个名为 counter 的 store

定义组件时，利用 Composition API 创建 setup 方法，并在此方法里初始化 store 对象以及设定 watcher:

export default defineComponent({
  name: "WatchExample",
  setup() {
    const store = useStore();

    // 使用 watch 来监视 state 属性的变化
    watch(
      () => store.count,
      (newVal, oldVal) => console.log(`count changed from ${oldVal} to ${newVal}`)
    );

    return { store };
  }
});

上述代码片段中，每当 `store.count` 发生改变时就会触发回调函数执行日志记录操作[^2]。

对于更复杂的场景，比如当需要监控整个对象或数组类型的属性变动时，则可以采用 deep option 参数来进行深层次监测：

setup() {
  const store = useStore();
  
  watch(
    () => ({...store.complexState}), 
    (newValue, oldValue) => {
        console.log('Complex State Changed:', newValue);
    },
    {deep: true}
  );
  
  return { store };
}

这里通过解构赋值的方式复制了一份 `complexState` ，从而避免直接引用原始数据结构可能带来的副作用问题[^3]。

最后需要注意的是，如果希望在页面加载初期就能获取到初始值的信息，那么可以在第二个参数的位置传入立即执行标志位 `{ immediate: true }` 。这样做的好处是在第一次渲染的时候也会调用一次侦听器的处理逻辑[^4]。