我目前正在对我们使用Options API编写的组件进行重写。从代码剪切的角度来看，一个有趣的重写点是我们的许多模态框，在它们出现的每个地方都附有自己的关闭/打开和布尔逻辑。
我的问题是，我很难弄清楚如何使一个可组合函数适用于多个模态框实例。
以这个非常简单的例子为例：
Modal.vue
1 2 3 4 5 | <template>
<div v-if="isOpen" @click="$emit('closeModal')">
<slot></slot>
</div>
</template>
|
1 | const props = defineProps<{ isOpen: false }>();
|
useModal.ts
1 2 3 4 5 6 | export default const useModal = () => {
const isModalOpen = ref(false);
const toggleModal = () => isModalOpen.value = !isModalOpen.value;
return { isModalOpen, toggleModal }
}
|
然后在某个组件中使用它，你可以这样做：
组件.vue
1 2 3 4 | <template>
<button @click="toggleModal">打开模态框<button>
<Modal :is-open="isModalOpen" @close-modal="toggleModal">模态框内容</Modal>
</template>
|
1 2 3 | import useModal from "useModal";
const { isModalOpen, toggleModal } = useModal();
|
当页面上只有一个模态框时，这样做完全没问题，但是如何让它适用于任意数量的模态框呢？显然，我仍然需要定义变量名来跟踪哪个模态框被切换/打开，但是如何在不为每个模态框重新创建useModal组合内容的情况下实现这一点呢？
理想情况下，我希望做类似于这样的事情
1 2 3 4 5 6 7 | <template>
<button @click="toggleOne">打开1</button>
<button @click="toggleTwo">打开2</button>
<Modal :is-open="isOneOpen" @close-modal="toggleOne">模态框1</Modal>
<Modal :is-open="isTwoOpen" @close-modal="toggleTwo">模态框2</Modal>
</template>
|
1 2 3 4 | import useModal from "useModal";
const { isOneOpen, toggleOne } = useModal();
const { isTwoOpen, toggleTwo } = useModal();
|
但是这样不起作用（显然）。有没有办法实现我在这里的目标，或者我对如何/何时使用组合函数有根本性的误解？
我尝试了一些变体，像这样
1 2 3 4 5 | const { isModalOpen as isOneOpen } = useModal();
const isOneOpen = useModal().isModalOpen;
const isOneOpen = { ...useModal().isModalOpen; };
|
但是这些对我都不起作用。