vue3在页面监听Pinia状态管理里的数据变化

在Vue 3中，要监听Pinia状态管理中的数据变化，可以使用`watch`函数来监测数据的变化并执行相应的操作。以下是一个示例：

// MyComponent.vue
<template>
  <div>
    <p>{{ dataValue }}</p>
  </div>
</template>

<script>
import { defineComponent, watch } from 'vue';
import { useStore } from 'pinia';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const store = useStore();

    const dataValue = store.dataValue;

    watch(
      () => store.dataValue,
      (newValue, oldValue) => {
        // 在数据变化时执行的操作
        console.log('数据发生变化');
        console.log('新值:', newValue);
        console.log('旧值:', oldValue);
      }
    );

    return {
      dataValue,
    };
  },
});
</script>

在上面的示例中，我们使用`watch`函数来监听`store.dataValue`数据的变化。当数据发生变化时，回调函数会被触发，并且传递新值和旧值作为参数。

你可以在回调函数中执行任何你想要的操作，比如更新界面、发送网络请求等。在示例中，我们简单地通过`console.log`输出了新值和旧值。

通过以上设置，你可以在Vue 3的Pinia状态管理中监听数据的变化，并在变化发生时执行相应的操作。