vue3 监听pinia

在 Vue 3 中，我们可以使用 Pinia 来管理状态，并且可以使用 Vue 3 Composition API 来监听 Pinia 状态的变化。

首先，确保已经安装了 Pinia 和 Vue 3：

npm install pinia
npm install vue@next

然后，在你的应用程序的入口文件（通常是 `main.js`）中，创建一个 Pinia 实例并将其作为插件注册到 Vue 中：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

接下来，在你的组件中，可以使用 `useStore` 函数来创建一个与 Pinia 关联的存储：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { useStore } from 'pinia'

export default {
  setup() {
    const store = useStore()

    // 监听 count 的变化
    store.$subscribeTo('count', (newValue, oldValue) => {
      console.log(`count 变化：${oldValue} → ${newValue}`)
    })

    function increment() {
      store.count++
    }

    return {
      count: store.count,
      increment,
    }
  },
}
</script>

在上面的示例中，我们使用 `store.$subscribeTo` 方法来监听 `count` 属性的变化，并在回调函数中进行逻辑处理。当 `count` 发生变化时，回调函数将被触发，并传递新值和旧值。

这就是在 Vue 3 中使用 Pinia 监听状态变化的方法。希望能对你有所帮助！