Vue3中复用useModal组合式函数实现多模态框控制的方案问询

我正在将基于Options API编写的组件重写为Composition API，大量模态框是重写重点——这些模态框在各处使用时都带有独立的开关及布尔逻辑。目前遇到的问题是，无法让组合式函数useModal同时处理多个模态框实例。

现有代码示例 #

Modal.vue #

<template>
  <div v-if="isOpen" @click="$emit('closeModal')"> 
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{ isOpen: boolean }>();
</script>

useModal.ts #

import { ref } from 'vue';

export default function useModal() {
  const isModalOpen = ref(false);
  const toggleModal = () => isModalOpen.value = !isModalOpen.value;

  return { isModalOpen, toggleModal }
}

单个模态框使用示例（Component.vue） #

<template>
  <button @click="toggleModal">Open modal</button>
  <Modal :is-open="isModalOpen" @close-modal="toggleModal">Modal Content</Modal>
</template>

<script setup lang="ts">
import useModal from "./useModal";
import Modal from "./Modal.vue";

const { isModalOpen, toggleModal } = useModal();
</script>

问题描述 #

单个模态框时上述方案可行，但需要支持页面中任意数量的模态框时，需要定义不同变量名区分每个模态框的状态，但不想重复编写useModal内的逻辑。

我理想的使用方式如下：

<template>
  <button @click="toggleOne">Open 1</button>
  <button @click="toggleTwo">Open 2</button>

  <Modal :is-open="isOneOpen" @close-modal="toggleOne">Modal 1</Modal>
  <Modal :is-open="isTwoOpen" @close-modal="toggleTwo">Modal 2</Modal>
</template>

<script setup lang="ts">
import useModal from "./useModal";
import Modal from "./Modal.vue";

// 期望但无法生效的写法
const { isOneOpen, toggleOne } = useModal();
const { isTwoOpen, toggleTwo } = useModal();
</script>

我尝试过以下几种写法，但均未成功：

// 尝试1
const { isModalOpen as isOneOpen } = useModal();

// 尝试2
const isOneOpen = useModal().isModalOpen;

// 尝试3
const isOneOpen = { ...useModal().isModalOpen };

可行解决方案 #

核心：利用解构别名实现变量重命名 #

useModal每次调用都会创建独立的状态（ref）和方法，彼此完全隔离。你只需要在解构时使用别名语法，将返回的固定键名重命名为自定义名称即可：

<template>
  <button @click="toggleOne">Open 1</button>
  <button @click="toggleTwo">Open 2</button>

  <Modal :is-open="isOneOpen" @close-modal="toggleOne">Modal 1</Modal>
  <Modal :is-open="isTwoOpen" @close-modal="toggleTwo">Modal 2</Modal>
</template>

<script setup lang="ts">
import useModal from "./useModal";
import Modal from "./Modal.vue";

// 正确写法：使用别名重命名
const { isModalOpen: isOneOpen, toggleModal: toggleOne } = useModal();
const { isModalOpen: isTwoOpen, toggleModal: toggleTwo } = useModal();
</script>

优化useModal：支持初始状态与更多操作 #

可以给useModal添加初始状态参数，并扩展打开/关闭的独立方法，提升灵活性：

// useModal.ts
import { ref } from 'vue';

export default function useModal(initialState = false) {
  const isModalOpen = ref(initialState);
  const toggleModal = () => isModalOpen.value = !isModalOpen.value;
  const openModal = () => isModalOpen.value = true;
  const closeModal = () => isModalOpen.value = false;

  return { isModalOpen, toggleModal, openModal, closeModal };
}

使用时可以指定初始状态：

// 初始就打开的模态框
const { isModalOpen: isPreOpenModal, closeModal: closePreOpenModal } = useModal(true);

常见误区说明 #

• 你之前尝试的const { isModalOpen as isOneOpen }其实是正确语法，若未生效可能是其他代码问题（比如模板中仍使用原变量名）；
• useModal每次调用都会生成独立的状态上下文，不存在“共享状态”问题，多次调用即可实现多模态框的独立控制。

内容的提问来源于stack exchange，提问作者Sensanaty