Mehrere zusammensetzbare Instanzen in einem einzigen Skript-Tag in Vue 3

Question

Ich arbeite derzeit an einer Neufassung einer Komponente, die wir mit der Options-API geschrieben haben. Aus Sicht des Code-Shearing besteht ein interessanter Umschreibepunkt darin, dass viele unserer modalen Boxen überall dort, wo sie erscheinen, über eine eigene Schließ-/Öffnen- und boolesche Logik verfügen.

Mein Problem ist, dass es mir schwer fällt, herauszufinden, wie ich eine zusammensetzbare Funktion für mehrere modale Instanzen funktionieren lassen kann.

Nehmen Sie dieses sehr einfache Beispiel:

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

Um es dann in einer Komponente zu verwenden, können Sie Folgendes tun:

组件.vue

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

import useModal from "useModal";

const { isModalOpen, toggleModal } = useModal();

Das ist vollkommen in Ordnung, wenn es nur ein Modal auf der Seite gibt, aber wie sorgt man dafür, dass es für eine beliebige Anzahl von Modals funktioniert? Natürlich muss ich immer noch Variablennamen definieren, um zu verfolgen, welches Modal umgeschaltet/geöffnet wird, aber wie erreiche ich das, ohne den useModalkombinierten Inhalt für jedes Modal neu zu erstellen?

Idealerweise würde ich gerne etwas Ähnliches machen

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

Aber das funktioniert (offensichtlich) nicht. Gibt es hier eine Möglichkeit, mein Ziel zu erreichen, oder habe ich ein grundlegendes Missverständnis darüber, wie/wann kombinierte Funktionen verwendet werden sollen?

Ich habe einige Variationen ausprobiert, wie diese

const { isModalOpen as isOneOpen } = useModal();

const isOneOpen = useModal().isModalOpen;

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

Aber nichts davon funktioniert bei mir.

Answer 1

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

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

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

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