vue.js - 滑盖：一旦新的滑盖处于活动状态，自动关闭所有滑盖

Question

我想像这样实现一个幻灯片：https ://tailwindui.com/components/application-ui/overlays/slide-overs

这个例子工作得很好，但现在我想决定如何显示和隐藏幻灯片。

当然我可以使用这样的按钮：

<button @click="open = !open">toggle</button>

<TransitionRoot as="template" :show="open">
   ...
</TransitionRoot>

在我的情况下，我必须使用多个滑盖，并且我必须确保同时只有一个滑盖处于活动状态。

所以让我们假设我得到了这个：

<button @click="open = !open">toggle 1</button>
<button @click="open2 = !open">toggle 2</button>
<button @click="open3 = !open">toggle 3</button>

<TransitionRoot as="template" :show="open">
   ...
</TransitionRoot>
<TransitionRoot as="template" :show="open2">
   ...
</TransitionRoot>
<TransitionRoot as="template" :show="open3">
   ...
</TransitionRoot>

所有滑盖可以同时处于活动状态。当然，我可以通过执行类似的操作来创建一个处理此问题的方法，@click="openmodal = 'modal1'"但在我的情况下，我需要此状态是全局的，因此所有视图都会“知道”当前哪个滑过处于活动状态......

在 vuejs2-times 中，我会使用 vuex 来存档它。但我不确定，这是否是 vuejs3 的方式。