Plusieurs instances composables dans une seule balise de script dans Vue 3

Question

Je travaille actuellement sur la réécriture d'un composant que nous avons écrit à l'aide de l'API Options. Du point de vue du découpage de code, un point de réécriture intéressant est que beaucoup de nos boîtes modales ont leur propre logique de fermeture/ouverture et booléenne qui leur est attachée partout où elles apparaissent.

Mon problème est que j'ai du mal à comprendre comment faire fonctionner une fonction composable pour plusieurs instances modales.

Prenons cet exemple très simple :

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

Ensuite, pour l'utiliser dans un composant, vous pouvez faire ceci :

组件.vue

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

import useModal from "useModal";

const { isModalOpen, toggleModal } = useModal();

C'est parfaitement bien lorsqu'il n'y a qu'un seul modal sur la page, mais comment le faire fonctionner pour un certain nombre de modaux ? Évidemment, je dois toujours définir des noms de variables pour savoir quel modal est basculé/ouvert, mais comment y parvenir sans recréer le contenu useModalcombiné pour chaque modal ?

Idéalement, j'aimerais faire quelque chose de similaire à ça

<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();

Mais ça ne marche pas (évidemment). Existe-t-il un moyen d'atteindre mon objectif ici, ou ai-je une incompréhension fondamentale sur comment/quand utiliser les fonctions combinées ?

J'ai essayé quelques variantes, comme celle-ci

const { isModalOpen as isOneOpen } = useModal();

const isOneOpen = useModal().isModalOpen;

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

Mais rien de tout cela ne fonctionne pour moi.

Answer 1

Vous pouvez réattribuer le nom de la valeur de retour d'une fonction composable lors de la déstructuration d'un objet comme suit :

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

Cela suffit pour distinguer l'état du modal à suivre.

Exemple de travail ici : https://codesandbox.io/s/vue-3-composition-destructuring-fts2x9