兄弟组件 pinia

### 使用 Pinia 实现兄弟组件间的通信

#### 创建 Store

为了使兄弟组件能够共享状态并相互通信，首先需要创建一个 `store` 来集中管理这些组件所需的数据。这可以通过定义一个新的 store 文件来完成。

// stores/counterStore.js
import { defineStore } from 'pinia'

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

此代码片段展示了如何利用 Pinia 定义一个简单的计数器存储逻辑[^3]。

#### 注入 Store 到 Vue 组件

为了让两个或多个兄弟组件都能够访问同一个 store 的状态，可以在每个组件内部引入该 store 并调用其方法来进行交互操作。

// ComponentA.vue 和 ComponentB.vue 都会这样导入相同的 store
<script setup>
import { useCounterStore } from '../stores/counterStore'
const counter = useCounterStore()
</script>

<template>
  <!-- 显示当前计数值 -->
  <p>Count is {{ counter.count }}</p>
  
  <!-- 提供按钮改变计数值 -->
  <button @click="counter.increment">Increment</button>
  <button @click="counter.decrement">Decrement</button>
</template>

上述模板中的 `<ComponentA>` 和 `<ComponentB>` 可以分别位于不同的文件里，但是它们都连接到了同一实例化的 `useCounterStore()` 上面，因此当任何一个地方改变了 `count` 值之后，其他所有关联的地方都会同步更新显示最新的值[^4]。

这种模式不仅限于同级的兄弟组件之间；实际上任何层级上的组件只要能获取到这个 store 就可以参与进来共同维护这份公共的状态信息。