vue3 pinia 实现各个组件中的通信

Vue3中可以使用Pinia实现组件间的通信。Pinia是一个状态管理库，专为Vue3设计，可以用于全局状态管理和组件间通信。

要使用Pinia，首先需要安装pinia库：

npm install pinia

然后在main.js中创建并注册Pinia实例：

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函数创建一个store实例，并在组件中使用：

import { defineComponent, ref } from 'vue'
import { useStore } from 'pinia'

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

    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
})

在另一个组件中，也可以使用useStore函数创建一个store实例，并在组件中使用：

import { defineComponent } from 'vue'
import { useStore } from 'pinia'

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

    const doubleCount = computed(() => store.count * 2)

    return {
      doubleCount
    }
  }
})

这样，两个组件就可以通过store实例进行通信了。其中一个组件中的count发生变化时，另一个组件中的doubleCount也会相应地更新。

除了使用store实例进行通信，Pinia还提供了其他的API，如actions、getters和mutations等，可以用于更复杂的通信需求。具体的使用方法可以参考Pinia的官方文档