场景概括

在工作中，有时代码过于臃肿需要我们进行组件拆分，今天我面临了一个如下的场景：
在一个组件（我们称它为组件A)中有一个按钮，点击它需要使它的兄弟组件（我们称它为组件B)中的一个el-dialog进行显示。我们通过pinia来进行控制显隐的变量的存储，这个变量我们称为：dialogVisible。我们的目的是通过dialogVisibl控制组件B中el-dialog的显隐，并当el-dialog隐藏后dialogVisible的值为false。代码如下：

首先我们定义pinia:

import { defineStore } from 'pinia'

export const useDialogStore = defineStore({
  id: 'dialog',
  state: () => ({
    dialogVisible: false // 控制el-dialog的显示与隐藏的变量
  }),
  getters: {
    getDialogVisible() {
      return this.dialogVisible
    }
  },
  actions: {
    setDialogVisible(value) {
      this.dialogVisible = value
    }
  }
})

其次我们定义组件A

<template>
  <div>
    <button @click="showDialog">显示子组件的对话框</button>
  </div>
</template>

<script>
import { useDialogStore } from './dialogStore.js'
export default {
  setup() {
    // 使用pinia store
    const dialogStore = useDialogStore()
    // 定义一个方法，用来显示组件B的对话框
    const showDialog = () => {
      dialogStore.setDialogVisible(true)
    }
    return {
      showDialog
    }
  }
}
</script>

最后我们来定义组件B

<template>
    <el-dialog
      title="组件B的对话框"
      :visible.sync="dialogVisible"
      width="30%"
      @close="closeDialog"
    >
      <span>这是一个组件B的对话框</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
      </span>
    </el-dialog>
</template>

<script>
import { useDialogStore } from './dialogStore.js'
export default {
  setup() {
    // 使用pinia store
    const dialogStore = useDialogStore()
    // 定义一个计算属性，用来获取pinia store中的变量
    const dialogVisible = computed(() => dialogStore.getDialogVisible())
    // 定义一个方法，用来关闭对话框
    const closeDialog = () => {
      dialogStore.setDialogVisible(false)
    }
    return {
      dialogVisible,
      closeDialog
    }
  }
}
</script>

通过上面的代码，我们就实现了所需的功能，即在组件A中点击按钮，可以控制组件B中el-dialog的显示与隐藏，而且当el-dialog关闭时，变量的值也会变为false。使用pinia这个状态管理库，来在全局定义和修改这个变量，从而实现组件间的通信。
如果jym有更好的方法，烦请指正，感谢浏览。😊