如何在 Vuex 的 createStore() 中使用 Google 地图功能？

Question

我正在尝试设置我的Vuex存储状态，以包含Google Maps Javascript API中的Marker对象数组。目前，我的createStore函数如下：

import { createStore } from "vuex";

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

Google Maps 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

据我所知，该错误是由于import store from "./store"运行时尚未加载google所致。然而，我不确定解决这个问题的正确方法是什么

我能想到的最好的办法是将加载程序代码移动到我的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));