vue3 非setup模式下 监听状态管理里数据的值

在Vue 3中，如果你不是在`setup`函数内部使用Pinia状态管理库，而是在普通的Vue组件内部使用，你可以使用`$pinia`对象来监听状态管理中数据的值。以下是一个示例：

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

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      dataValue: '',
    };
  },
  created() {
    this.$pinia.state.$on('dataValue', this.onDataValueChange);
  },
  beforeUnmount() {
    this.$pinia.state.$off('dataValue', this.onDataValueChange);
  },
  methods: {
    onDataValueChange(newValue) {
      // 在数据变化时执行的操作
      console.log('数据发生变化');
      console.log('新值:', newValue);
      this.dataValue = newValue;
    },
  },
};
</script>

在上面的示例中，我们通过`this.$pinia.state.$on`来监听`dataValue`数据的变化，并在`created`钩子函数中进行注册。当数据发生变化时，`onDataValueChange`方法会被调用，并将新值作为参数传递进去。

在`beforeUnmount`钩子函数中，我们使用`this.$pinia.state.$off`来取消监听，以防止内存泄漏。

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