Vue/Nuxt 在会话中保留变量

Question

我目前正在使用 Google 地图 Javascript API 来实例化地图对象。我有一个简单的地图页面。问题是我意识到当我跨页面（路线）导航然后返回地图页面时，我重新实例化了对我来说似乎不必要的地图对象（算作另一个 API 调用）。在 vanillaJS 中，我将只创建一个全局映射变量。

我想知道如果我想在会话中保留地图对象，以便来回路由调用相同的地图对象，我该怎么办。

我的代码看起来有点像这样...

<template>
  <div>
    <div id="map"></div>
  </div>
</template>

<script>
methods: {
    onScriptLoaded() {
      console.log("Triggered Maps API");
      this.map = new window.google.maps.Map(document.getElementById("map"), {
        center: new window.google.maps.LatLng(somelat, somelng),
        zoom: 11,
        ...})
    }

mounted(){
if (!process.server && !window.google) {
      const script = document.createElement("script");
      script.onload = this.onScriptLoaded;
      script.type = "text/javascript";
      script.src =
        "https://maps.googleapis.com/maps/api/js?key=<API KEY>&libraries=places";
      document.head.appendChild(script);
    } else {
      this.onScriptLoaded();
    }
}
</script>

当我 return 从路线（例如 /about）时，this.map 变为未定义并再次实例化。

有什么方法可以保留 this.map 对象，以便在我 return 访问此页面时它仍然保留地图对象？

Answer 1

如果你使用 vue-router，你可以使用 keep-alive 缓存路由组件。

  <keep-alive>
    <router-view />
  </keep-alive>

这将缓存所有路由。如果只想缓存目标组件，请使用 include:

  <keep-alive :include=['mapComponent']>
    <router-view />
  </keep-alive>

注意：'mapComponent' 是组件的名称，而不是路由的名称。

或者，您可以直接缓存组件：

<keep-alive>
  <map-component></map-component>
</keep-alive>

使用keep-alive，安装的钩子将在组件创建后调用一次。要在导航到路线或从路线导航时触发任何特定操作，您将使用 activated() 和 deactivated() 挂钩。

Vue/Nuxt 在会话中保留变量

Vue/Nuxt persist variable within session

javascript

google-maps-api-3

vue.js

nuxt.js