Berbilang contoh boleh gubah dalam teg skrip tunggal dalam Vue 3

Question

Saya sedang mengusahakan penulisan semula komponen yang kami tulis menggunakan API Pilihan. Dari perspektif ricih kod, titik penulisan semula yang menarik ialah kebanyakan kotak modal kami mempunyai logik tertutup/terbuka dan boolean yang dilampirkan pada kotak tersebut di mana-mana sahaja ia muncul.

Masalah saya ialah saya menghadapi masalah memikirkan cara membuat satu fungsi boleh gubah berfungsi untuk berbilang contoh modal.

Ambil contoh yang sangat mudah ini:

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

Kemudian untuk menggunakannya dalam beberapa komponen, anda boleh melakukan ini:

组件.vue

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

import useModal from "useModal";

const { isModalOpen, toggleModal } = useModal();

Ini sangat baik apabila terdapat hanya satu modal pada halaman, tetapi bagaimana anda menjadikannya berfungsi untuk sebarang bilangan modal? Jelas sekali saya masih perlu mentakrifkan nama pembolehubah untuk menjejaki mod mana yang ditogol/dibuka, tetapi bagaimanakah saya boleh mencapai ini tanpa mencipta semula useModal kandungan gabungan untuk setiap modal?

Sebaik-baiknya saya ingin melakukan sesuatu yang serupa dengan ini

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

Tetapi itu tidak berkesan (jelas). Adakah terdapat cara untuk mencapai matlamat saya di sini, atau adakah saya mempunyai salah faham asas tentang cara/bila menggunakan fungsi gabungan?

Saya mencuba beberapa variasi, seperti ini

const { isModalOpen as isOneOpen } = useModal();

const isOneOpen = useModal().isModalOpen;

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

Tetapi semua ini tidak berkesan untuk saya.

Answer 1

Anda boleh menetapkan semula nama nilai pulangan fungsi boleh gubah semasa pemusnahan objek seperti berikut:

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

Ini sudah cukup untuk membezakan keadaan modal yang akan dijejaki.

Contoh berfungsi di sini: https://codesandbox.io/s/vue-3-composition-destructuring-fts2x9