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