Vue 3 组合式 API 规范配合 Pinia

实现效果：
根据pinia中存储的不同状态，
点击不同的按钮，切换不同的弹窗和标题

1. Pinia Store（组合式写法）

// stores/dataStore.ts
import { defineStore } from 'pinia'
import { reactive } from 'vue'type DialogType = 'type1' | 'type2'
//定义一个接口规范
interface DialogState {id: numbername: stringvisible: boolean
}export const useDataStore = defineStore('dataType', () => {// 状态定义 两个不同的状态const state = reactive({dialogs: {type1: { id: 1, name: '数据1', visible: false },type2: { id: 2, name: '数据2', visible: false }} as Record<DialogType, DialogState>,showDownloadList: false})// Actionsconst toggleDialog = (type: DialogType, visible: boolean) => {// 在切换之前-关闭所有对话框Object.keys(state.dialogs).forEach(key => {state.dialogs[key as DialogType].visible = false})// 再打开目标对话框state.dialogs[type].visible = visible}return {...toRefs(state), // 保持响应式解构toggleDialog}
})

---

2. 按钮组件（组合式写法）

<!-- Buttons.vue -->
<template><div class="header-box"><el-button type="primary" size="large" @click="openDialog('type1')">类型弹窗1</el-button><el-button type="primary" size="large" @click="openDialog('type2')">类型弹窗2</el-button></div>
</template><script setup lang="ts">
import { useExportDataStore } from '../store'const exportStore = useExportDataStore()
//调用store中的方法
const openDialog = (type: 'type1' | 'type2') => {exportStore.toggleDialog(type, true)
}
</script>

---

3. 弹窗组件（组合式写法）

<!-- ExportDialog.vue -->
<template><el-dialog v-model="currentDialog.visible" :title="currentDialog.name" width="800"@close="onClose"><!-- 动态渲染表单 --><component :is="currentDialog.id === 1 ? Type1Form : Type2Form"v-model="formData"/><template #footer><el-button @click="onClose">取消</el-button><el-button type="primary" @click="onSubmit">确定</el-button></template></el-dialog>
</template><script setup lang="ts">
import { computed, ref } from 'vue'
import { useExportDataStore } from '../store'const exportStore = useExportDataStore()
const { dialogs } = storeToRefs(exportStore)// 计算当前活跃的对话框
const currentDialog = computed(() => {return Object.values(dialogs.value).find(d => d.visible) || dialogs.value.type1
})// 动态表单数据
const formData = ref({name: '',region: ''
})const onClose = () => {exportStore.toggleDialog(currentDialog.value.id === 1 ? 'type1' : 'type2', false)
}const onSubmit = () => {console.log('提交数据:', {type: currentDialog.value.name,data: formData.value})onClose()
}
</script>

---

4. 表单子组件示例（组合式写法）

<!-- GoodsForm.vue -->
<template><el-form :model="modelValue"><el-form-item label="类型1" :label-width="formLabelWidth"><el-input v-model="modelValue.name" /></el-form-item><el-form-item label="类型2" :label-width="formLabelWidth"><el-select v-model="modelValue.region"><el-option label="电子产品" value="digital" /><el-option label="服装" value="clothes" /></el-select></el-form-item></el-form>
</template><script setup lang="ts">
defineProps({modelValue: {type: Object,required: true}
})const formLabelWidth = '100px'
</script>

---

关键优化点说明

1. 类型安全的 Store

   • 使用 TypeScript 明确定义 DialogType 和 DialogState
   • 通过泛型确保状态结构安全

2. 自动对话框切换

   const currentDialog = computed(() => {return Object.values(dialogs.value).find(d => d.visible) || dialogs.value.goods
   })
   

   • 自动检测当前应显示的对话框
   • 避免手动维护显示状态

3. 动态组件渲染

   <component :is="currentDialog.id === 1 ? Type1 : Type2" />
   

   • 根据对话框类型动态切换表单组件
   • 减少模板中的条件判断

4. 单一数据源

   • 所有对话框状态集中管理
   • 通过 toggleDialog action 统一控制

5. 响应式处理

   • 使用 storeToRefs 保持解构后的响应式
   • 表单数据使用 ref 实现双向绑定

---

组合式 API 的优势

1. 逻辑复用

   • 可以轻松提取 useDialog 等 composable 函数

2. 类型推导

   • 更好的 TypeScript 支持

3. 代码组织

   • 相关逻辑可以集中在一起（如表单处理与对话框控制）

4. 性能优化

   • 精确控制响应式依赖

---

对比选项式 API 的改进

特性	选项式 API	组合式 API
代码组织	按选项分块	按功能聚合
类型支持	需要额外类型标注	天然支持类型推导
逻辑复用	Mixins/插件	Composables
响应式处理	自动代理 data	显式声明 ref/reactive
Pinia 集成	需在每个方法中调用 useStore	在 setup 中一次性调用

这种实现方式既保持了组合式 API 的灵活性，又通过 Pinia 提供了专业的状态管理方案，适合中大型项目使用。

这个 computed 计算属性的作用是自动找出当前应该显示的对话框

---

代码解析

const currentDialog = computed(() => {return Object.values(dialogs.value).find(dialog => dialog.visible) || dialogs.value.goods
})

1. Object.values(dialogs.value)

• dialogs 是一个 Pinia store 中的响应式对象，结构如下：

  dialogs: {goods: { id: 1, name: '类型1', visible: false },orders: { id: 2, name: '类型2', visible: false }
  }
  

• Object.values() 会提取对象的所有值，返回：

  [{ id: 1, name: '类型1', visible: false },{ id: 2, name: '类型2', visible: false }
  ]
  

2. .find(dialog => dialog.visible)

• 遍历数组，找到第一个 visible: true 的对话框
• 例如：当点击"导出商品数据"按钮后，dialogs.type1.visible 会变为 true，此时会返回：

  { id: 1, name: '类型1', visible: false },
  

3. || dialogs.value.goods

• 如果所有对话框都不可见（visible: false），则默认返回 type1 对话框
• 这是为了防止 currentDialog 返回 undefined（防御性编程）

---

场景说明

有两个相似弹窗
但同一时间只需要显示一个对话框。

currentDialog 会自动：

1. 检测哪个对话框应该显示
   通过检查 visible 状态，确定用户点击的是哪个按钮。

2. 提供统一的数据源
   在模板中可以直接用 currentDialog 绑定，在弹窗关闭之前清空组件内容。无需写重复逻辑：

   <el-dialog v-model="currentDialog.visible" :title="currentDialog.name":before-close="close"
   ><!-- 内容 -->
   </el-dialog>
   

---

具体工作流程

1. 用户点击"类型1"按钮

设置 type1.visible = true

exportStore.toggleDialog('type1', true) 

2. currentDialog 自动更新

• Object.values(dialogs.value) 会得到：

  [{ id: 1, name: '类型1', visible: false },// type1{ id: 2, name: '类型2', visible: false }// type2
  ]
  

• .find() 会找到第一个 visible: true 的项（即 type1）
• 模板中的 el-dialog 会显示类型1对话框

3. 用户点击"类型2"按钮

exportStore.toggleDialog('type2', true) // 设置 type2.visible = true

• 此时 type1.visible 会自动设为 false（如果你在切换时关闭其他对话框）
• currentDialog 会切换到 orders

---

为什么不用 v-if="dialogs.type1.visible"？

虽然可以直接写：

<el-dialog v-if="dialogs.goods.visible" ...>
<el-dialog v-if="dialogs.orders.visible" ...>

但使用 currentDialog 的优势在于：

1. 避免重复代码：只需维护一个 <el-dialog> 模板
2. 动态扩展：如果未来新增更多导出类型（如 users），只需在 store 中添加配置，无需修改模板
3. 逻辑集中：对话框的切换逻辑完全由计算属性处理，更清晰

---

如何确保同一时间只显示一个对话框？

可以在 toggleDialog 方法中添加逻辑：

// 在 Pinia store 中
actions: {toggleDialog(type: DialogType, visible: boolean) {// 关闭所有其他对话框Object.keys(this.dialogs).forEach(key => {this.dialogs[key].visible = false})// 打开当前对话框this.dialogs[type].visible = visible}
}

这样当你打开一个对话框时，其他对话框会自动关闭。