pinia通过store统一管理弹窗显隐与参数，state含visible和data，actions提供open/close方法，支持函数传参与响应式更新，实现跨组件复用。
Pinia 管理弹窗显隐状态和参数传递，核心是把“是否显示”和“传入数据”统一存到 store 中，让任意组件都能读取、修改，避免层层 props 或事件透传。关键不在于复杂逻辑，而在于结构清晰、响应及时、复用方便。
定义弹窗状态的 Store
在 src/stores/modal.js 中创建一个专门管理弹窗的 store：
-
state 存两个关键字段：
visible（布尔值控制显隐）和data（对象，存放标题、内容、回调函数等任意参数） -
actions 提供
open(data)和close()方法，open 自动设 visible 为 true 并合并 data，close 清空 data 并设 visible 为 false - 不需要 getters，除非你要衍生计算（比如判断当前弹窗类型）
示例代码：
import { defineStore } from 'pinia'
export const useModalStore = defineStore('modal', {
state: () => ({
visible: false,
data: {}
}),
actions: {
open(data = {}) {
this.visible = true
this.data = { ...this.data, ...data }
},
close() {
this.visible = false
this.data = {}
}
}
})
在触发组件中调用 open
比如在列表页点击“编辑”按钮时打开弹窗：
- 导入 store：
const modal = useModalStore() - 点击事件中传参：
modal.open({ title: '编辑任务', id: 123, onSave: handleSave }) - 注意：函数（如
onSave）可以作为参数传入，store 会保留引用，后续弹窗组件可直接调用
在弹窗组件中响应并使用状态
在 ModalDialog.vue 中：
- 用
useModalStore()获取实例，通过modal.visible控制 v-if 或 v-show - 直接访问
modal.data.title、modal.data.id渲染内容 - 确定按钮调用
modal.data.onSave?.(form)，取消按钮调用modal.close() - 建议配合
onBeforeUnmount或v-model:open的关闭监听，确保关闭时自动清理
进阶建议：支持多弹窗或防重复打开
如果业务需要同时管理多个弹窗（如确认框 + 表单弹窗），可将 state 改为数组：
-
stack: []存储弹窗配置对象，current指向最上层 -
push(config)入栈，pop()出栈，clearAll()清空 - 防重复打开可在
open中加判断：if (this.visible) return
