Vue 3中單一腳本標籤中的多個可組合實例
我目前正在對我們使用Options API編寫的元件進行重寫。從程式碼剪切的角度來看，一個有趣的重寫點是我們的許多模態框，在它們出現的每個地方都附有自己的關閉/開啟和布林邏輯。
我的問題是，我很難弄清楚如何讓一個可組合函數適用於多個模態框實例。
以這個非常簡單的例子為例：
Modal.vue
#
1 2 3 4 5 | <template>
<div v-if="isOpen" @click="$emit('closeModal')">
<slot></slot>
</div>
</template>
|
1 | const props = defineProps<{ isOpen: false }>();
|
useModal.ts
#
1 2 3 4 5 6 | export default const useModal = () => {
const isModalOpen = ref(false);
const toggleModal = () => isModalOpen.value = !isModalOpen.value;
return { isModalOpen, toggleModal }
}
|
然後在某個元件中使用它，你可以這樣做：
元件.vue
#
1 2 3 4 | <template>
<button @click="toggleModal">打开模态框<button>
<Modal :is-open="isModalOpen" @close-modal="toggleModal">模态框内容</Modal>
</template>
|
1 2 3 | import useModal from "useModal";
const { isModalOpen, toggleModal } = useModal();
|
當頁面上只有一個模態框時，這樣做完全沒問題，但是要如何讓它適用於任意數量的模態框呢？顯然，我仍然需要定義變數名稱來追蹤哪個模態框被切換/打開，但是如何在不為每個模態框重新創建useModal組合內容的情況下實現這一點呢？
理想情況下，我希望做類似這樣的事情
1 2 3 4 5 6 7 | <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>
|
1 2 3 4 | import useModal from "useModal";
const { isOneOpen, toggleOne } = useModal();
const { isTwoOpen, toggleTwo } = useModal();
|
但是這樣不起作用（顯然）。有沒有辦法實現我在這裡的目標，或者我對如何/何時使用組合函數有根本性的誤解？
我嘗試了一些變體，像這樣
1 2 3 4 5 | const { isModalOpen as isOneOpen } = useModal();
const isOneOpen = useModal().isModalOpen;
const isOneOpen = { ...useModal().isModalOpen; };
|
但是這些對我都不起作用。
