pinia实现组件通信

Pinia是一个基于Vue 3的状态管理库，它可以帮助我们实现组件之间的通信。下面是使用Pinia实现组件通信的示例：

1. 首先，我们需要安装Pinia库：

npm install pinia

2. 在主文件（例如main.js）中引入Pinia并创建一个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')

3. 在需要进行组件通信的组件中，我们可以使用Pinia提供的`defineStore`函数来定义一个store：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
 }
})

4. 在父组件中，我们可以通过`useStore`函数来获取store实例，并在模板中使用store的状态和方法：

import { useCounterStore } from './store'

export default {
  setup() {
    const counterStore = useCounterStore()
    return {
      counterStore
    }
  }
}

5. 在子组件中，我们也可以通过`useStore`函数来获取store实例，并在模板中使用store的状态和方法：

import { useCounterStore } from './store'

export default {
  setup() {
    const counterStore = useCounterStore()

    return {
      counterStore
    }
  }
}

通过以上步骤，我们就可以在父组件和子组件之间实现数据的双向通信了。