Google maps 在页面加载NuxtJS之前访问Vuex存储

上下文：我正在尝试通过BeforeCenter（）路由保护上的place_id获取Google Maps place数据。本质上，我希望在有人准确输入url时加载数据。目前，当我使用自动完成输入，然后输入路由时，一切都可以直接工作，但当我从新选项卡直接访问url时，一切都不起作用。我已经能够在传统的Vue中使用

beforeEnter（）

路由保护解决这个问题，但无法使用Nuxt解决这个问题。请帮忙

问题：在Nuxt中加载页面之前，如何访问Vuex存储

错误：我尝试的任何解决方案（见下文）要么以空白页面结束，要么页面无法加载（我认为它陷入了一个循环，无法解决问题）

尝试的解决方案：

使用如下所示的中间件：

中间件（{store，params}）{
return store.dispatch（'myModule/fetchLocation'，params.id）
}

使用异步数据，如下所示：

data（）{
返回{
filteredLocation:{}
}
}
//剪断
异步数据（{store，params}）{
const{data}=wait store.dispatch（'myModule/fetchLocation'，params.id）
返回filteredLocation=数据
}

我尝试查找fetch，但显然您不再有权访问

上下文

示例代码：

在我的一个商店模块中：

/*全球谷歌*/
从“Vue”导入Vue
从“~/node\u modules/vue2谷歌地图/src/main”导入*作为VueLogleMaps
Vue.use（VueLogleMaps{
负载：{
关键字：process.env.VUE_APP_GMAP_关键字，
库：“几何图形、图形、位置”
}
})
导出常量状态=（）=>({
selectedLocation:{}
})
导出常量操作={
fetchLocation（{commit}，params）{
返回新承诺（（解决）=>{
Vue.$gmapipPromiseLazy（）。然后（（）=>{
常量请求={
placeId:params，
字段：[
“姓名”，
“评级”，
“格式化的电话号码”，
“几何学”，
“地点id”，
"网站",，
"检讨",，
“用户评分总额”，
"照片",，
"邻近地区",，
“价格水平”
]
}
const service=new google.maps.places.places服务(
document.createElement（'div'）
)
service.getDetails（请求、功能（位置、状态）{
如果（状态=='OK'）{
提交（'SET_PLACE'，PLACE）
解决（）
}
})
})
})
}
}
导出常量突变={
设置位置：（状态，选择）=>{
state.selectedInstructor=selection
}
}

编辑：我已经在名为

google maps.js

的插件中有了它，在我的

numxt.config.js

文件中我有：

插件：[
{src:'~/plugins/google maps.js'}
]
//
//
建造：{
传输文件：[/^vue2谷歌地图.js（$| \/）/]，
扩展（配置，ctx）{}
}

使用中间件是我们在加载页面之前访问Vuex的方式。尝试将配置部分放入自定义Nuxt插件中。 在Plugins文件夹中创建一个文件（您可以将其命名为global.js）。 把这个

在global.js中。 然后像这样在nuxt.config.js中添加插件

 plugins: [
  '~/plugins/global.js' 
 ]

---

另外，请确保在文件夹结构中的“page\u id”名称之前使用下划线。

很抱歉，在最初的帖子中没有提到这一点（我已经编辑过）。我已经在名为

google maps.js

的插件中有了它，在我的

numxt.config.js

文件中有：

javascript插件：[{{src:'~/plugins/google maps.js'}]////构建：{transfile:[/^vue2 google maps.js（$\124; \/）/]，扩展（config，ctx）{}

 plugins: [
  '~/plugins/global.js' 
 ]