在页面加载NuxtJS之前访问Vuex Store

Question

上下文：我正在尝试通过 beforeEnter(( 路由防护上的place_id获取 Google 地图放置数据。从本质上讲，我希望当有人准确地 www.example.com/place/{place_id}输入网址时加载数据。目前，当我使用自动完成输入然后输入路线时，一切都直接工作，但当我直接从新选项卡访问 url 时，它不起作用。我已经能够使用传统 Vue 中的beforeEnter()路由守卫来解决这个问题，但使用 Nuxt 无法解决这个问题。 请帮忙！

问：在Nuxt中加载页面之前，如何访问Vuex Store？

错误：我尝试的任何解决方案(见下文(我要么最终得到一个空白页面，要么页面无法加载(我认为它陷入循环并且无法解决承诺(。

尝试的解决方案：

1. 使用中间件如下：

middleware({ store, params }) {
return store.dispatch('myModule/fetchLocation', params.id)
}

2. 使用asyncData，如下所示：

data(){
return{
filteredLocation: {}
}
}
// snip
async asyncData({ store, params }) {
const { data } = await store.dispatch('myModule/fetchLocation', params.id)
return filteredLocation = data
}

3. 我尝试查看获取，但显然您不再有权访问context

示例代码：

在我的一个商店模块中：

/* global google */
import Vue from 'vue'
import * as VueGoogleMaps from '~/node_modules/vue2-google-maps/src/main'
Vue.use(VueGoogleMaps, {
load: {
key: process.env.VUE_APP_GMAP_KEY,
libraries: 'geometry,drawing,places'
}
})
export const state = () => ({
selectedLocation: {}
})
export const actions = {
fetchLocation({ commit }, params) {
return new Promise((resolve) => {
Vue.$gmapApiPromiseLazy().then(() => {
const request = {
placeId: params,
fields: [
'name',
'rating',
'formatted_phone_number',
'geometry',
'place_id',
'website',
'review',
'user_ratings_total',
'photo',
'vicinity',
'price_level'
]
}
const service = new google.maps.places.PlacesService(
document.createElement('div')
)
service.getDetails(request, function(place, status) {
if (status === 'OK') {
commit('SET_PLACE', place)
resolve()
}
})
})
})
}
}
export const mutations = {
SET_PLACE: (state, selection) => {
state.selectedInstructor = selection
}
}

编辑：我已经在一个名为google-maps.js的插件中拥有它，并且在我的nuxt.config.js文件中，我有：

plugins: [
{ src: '~/plugins/google-maps.js' }
]
//
//
build: {
transpile: [/^vue2-google-maps.js($|/)/],
extend(config, ctx) {}
}

Answer 1

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

import Vue from 'vue'
import * as VueGoogleMaps from '~/node_modules/vue2-google-maps/src/main'
Vue.use(VueGoogleMaps, {
load: {
key: process.env.VUE_APP_GMAP_KEY,
libraries: 'geometry,drawing,places'
}
})

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

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

此外，请确保在文件夹结构中的"page_id"名称之前使用下划线。