Vue 3中单个脚本标签中的多个可组合实例

Question

我目前正在对我们使用Options API编写的组件进行重写。从代码剪切的角度来看，一个有趣的重写点是我们的许多模态框，在它们出现的每个地方都附有自己的关闭/打开和布尔逻辑。

我的问题是，我很难弄清楚如何使一个可组合函数适用于多个模态框实例。

以这个非常简单的例子为例：

Modal.vue

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

const props = defineProps<{ isOpen: false }>();

useModal.ts

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

  return { isModalOpen, toggleModal }
}

然后在某个组件中使用它，你可以这样做：

组件.vue

<template>
  <button @click="toggleModal">打开模态框<button>
  <Modal :is-open="isModalOpen" @close-modal="toggleModal">模态框内容</Modal>
</template>

import useModal from "useModal";

const { isModalOpen, toggleModal } = useModal();

当页面上只有一个模态框时，这样做完全没问题，但是如何让它适用于任意数量的模态框呢？显然，我仍然需要定义变量名来跟踪哪个模态框被切换/打开，但是如何在不为每个模态框重新创建useModal组合内容的情况下实现这一点呢？

理想情况下，我希望做类似于这样的事情

<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>

import useModal from "useModal";

const { isOneOpen, toggleOne } = useModal();
const { isTwoOpen, toggleTwo } = useModal();

但是这样不起作用（显然）。有没有办法实现我在这里的目标，或者我对如何/何时使用组合函数有根本性的误解？

我尝试了一些变体，像这样

const { isModalOpen as isOneOpen } = useModal();

const isOneOpen = useModal().isModalOpen;

const isOneOpen = { ...useModal().isModalOpen; };

但是这些对我都不起作用。

Answer 1

您可以在对象解构期间重新分配可组合函数的返回值的名称，如下所示：

const { isModalOpen: modalOne, toggleModal: toggleModalOne } = useModal();

这样就足以区分要跟踪的模态框的状态。

工作示例在这里：https://codesandbox.io/s/vue-3-composition-destructuring-fts2x9