如何在 Vuex 的 createStore() 中使用 Google Maps 函数？

Question

我正在尝试设置我的 Vuex 存储状态以包含来自 Google 地图 Javascript API 的标记对象数组。目前，我的 createStore 函数如下所示：

import { createStore } from "vuex";
    
export default createStore({
  state: {
    GCPMarkers: {
      basemapMarkers: [new google.maps.Marker()],
      mosaicMarkers: [new google.maps.Marker()],
    },
  },
  // other properties
});

Google 地图 Javascript API 加载到我主页中名为 Map 的 Vue 组件中：

// In Map.vue
mounted() {
  const loader = new Loader({
    apiKey: "my key",
    version: "weekly",
  });
    
  loader
    .load()
    .then(this.initMap)
    .catch((e) => console.log(e));
},

而我的main.ts是这样的：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

createApp(App).use(store).use(router).mount("#app");

当我运行我的应用程序时，它在 basemapMarkers: [new google.maps.Marker()], 行中报告以下内容：

Uncaught ReferenceError: google is not defined

我知道错误是由于 google 在 import store from "./store" 为运行时尚未加载。但是，我不确定解决这个问题的正确方法是什么。

我能想到的最好办法是将加载程序代码移动到我的 main.ts，这样只有当 loader 的承诺得到解决时，我才会开始导入其他文件。但是，这对我来说感觉很笨拙，可能不是这样。

Answer 1

由于您需要 google 被定义（由 Loader 加载），您应该推迟创建应用程序，直到 Loader 有完全的。假设 load() 成功分配 google 全局，您可以在 Promise 的回调中创建应用程序：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

const loader = new Loader({
  apiKey: "my key",
  version: "weekly",
});
    
loader
  .load()
  .then(() => {
    const store = require('./store').default
    createApp(App)
      .use(store) // ok to use store now that `google` is loaded
      .mount('#app');
  })
  .catch((e) => console.log(e));

如何在 Vuex 的 createStore() 中使用 Google Maps 函数？

How can I use Google Maps functions in Vuex's createStore()?

javascript

google-maps

typescript

vue.js

vuex