如何在后台保持加载一个 vue.js 单文件组件？

Posted 2023-02-23

【中文标题】如何在后台保持加载一个 vue.js 单文件组件？

【英文标题】：How to keep a vue.js single file component loaded in the background?

【发布时间】：2018-04-13 12:40:23

【问题描述】：

我目前在 vue 单个文件组件中有一个（地理）地图，上面有点/标记。在显示点/标记的详细信息时，我现在使用“位于地图组件顶部”的模式。当我关闭模式时，地图没有重新加载并且一切都处于相同的状态，这是需要的。

我宁愿不使用模式，而是使用另一个 vue 组件，但是当返回到地图时它会重新加载并且它已经失去了它的状态。有没有一种简单的方法可以让地图在后台加载？那么当回到“历史”时它仍然处于相同的状态吗？

【问题讨论】：

you 不是在使用 Vuex 吗？

@Saurabh 好点！但是this question and answer 说服我不要将整个地图保存在 vuex 中。使用 getter 和 setter 会非常困难，因为我的地图组件具有“复杂状态”。因此，只需将其保留在后台就可以完美地工作。

【参考方案1】：

当您导航到不同的路线时，您可以使用 keep-alive 组件来保持组件处于活动状态。 https://vuejs.org/v2/guide/components.html#keep-alive

另一种选择是将组件的状态保存到像 Vuex 这样的存储中，它是全局可用的，因此当你离开时它会存储数据。

【讨论】：

嗯，当我用 keep-alive 包装我的 maplayout 组件然后导航到另一个页面，然后返回它丢失的状态时......看起来它更多的是切换组件而不是导航到其他组件等。

搞定了，哈哈。必须为组件添加名称并使用文档中所述的“包含”！