运行Vue 3.2.6和Vite 2.5.1
我一直在尝试使用新的组合API，并试图找出一些常见的用例，在这些用例中，使用它来支持OptionsAPI是有意义的。我立即发现的一个很好的用途是在情态动词中，出现带有警告消息或对话框或其他任何内容的小弹出框。
在我以前的应用程序中，我必须在每个被调用模态的组件中创建模态打开逻辑，这导致了大量的重复。使用CompAPI，我尝试将逻辑提取到一个简单的modal.ts文件中，该文件导出2个东西，一个响应的openModal布尔值和一个toggleModal函数。效果很好!直到我的应用程序中有多个模态，也就是说，在这种情况下，它会同时打开每个模态，一个接一个。
设置
为例modal.ts
import { ref } from "vue";
const openModal = ref(false);
const toggleModal = () => {
openModal.value = !openModal.value;
};
export { openModal, toggleModal };
App.vue
<template>
<Example1 />
<Example2 />
<Example3 />
</template>
Modal.vue
<template>
<div class="modal" @click.self.stop="sendClose">
<slot />
</div>
</template>
<script setup>
const emit = defineEmits(["closeModal"]);
const sendClose = () => {
emit("closeModal");
};
</script>
Example#.vue
请注意，这些都是具有相同布局的独立组件，唯一的区别是数字
<template>
<h1>Example 1 <span @click="toggleModal">Toggle</span></h1>
<teleport to="body">
<Modal v-if="openModal" @closeModal="toggleModal">
<h1>Modal 1</h1>
</Modal>
</teleport>
</template>
<script setup>
import { openModal, toggleModal } from "@/shared/modal";
import Modal from "@/components/Modal.vue";
</script>
点击togglespan时发生的事情是显而易见的(事后看来)。它切换openModal的值，这将一次打开所有3个模态，一个在另一个之上。如果你试图实现嵌套模态，也就是在一个模态中打开另一个模态的逻辑，问题就更糟了。
我是否误解了如何在这里使用ref?每个组件都有可能拥有并跟踪自己的openModal版本吗?因为我在这里设置它的方式，它更像是一个全局存储，这对于这个特殊的用例来说不是很好。
我想象的工作方式是，每个组件将导入响应的openModal值，并独立地跟踪它。这样，当一个组件调用toggleModal时，它只会切换调用该函数的组件内部的值。
是否有一种方法做我最初打算通过组合API?我觉得答案很简单，但我真的想不出来。
这是因为您没有正确导出您的组合，导致共享状态，因为您正在导出相同的函数并引用所有组件。要解决您的问题，您应该将您在modal.ts中导出的任何内容包装在一个函数中，例如:
// Wrap in an exported function (you can also do a default export if you want)
export function modalComposition() {
const openModal = ref(false);
const toggleModal = () => {
openModal.value = !openModal.value;
};
return { openModal, toggleModal };
}
并且在你计划使用该组合的每个组件中，只需导入它，例如:
import { modalComposition } from "@/shared/modal";
import Modal from "@/components/Modal.vue";
// By invoking `modalComposition()`, you are no longer passing by reference
// And therefore there is no "shared state"
const { openModal, toggleModal } = modalComposition();
为什么这个工作?
当您导出一个函数，然后在每个组件的设置中调用它时，您通过执行该函数来确保每个组件都已设置，该函数返回一个新的ref