Доступ к хранилищу Vuex перед загрузкой страницы NuxtJS

Question

Контекст: Я пытаюсь получить данные о месте на Картах Google через place_id в охраннике маршрута beforeEnter (). По сути, я хочу, чтобы данные загружались, когда кто-то вводит URL-адрес точно www.example.com/place/ {place_id} . В настоящее время все работает напрямую, когда я использую свой ввод автозаполнения, а затем вхожу в маршрут, но это не работает, когда я напрямую обращаюсь к URL-адресу с вкладки fre sh. Я смог решить эту проблему, используя защиту маршрута beforeEnter() в традиционном Vue, но не могу решить эту проблему с помощью Nuxt. Пожалуйста, помогите!

Вопрос: Как я могу получить доступ к Vuex Store до загрузки страницы в Nuxt?

Ошибка: Любое решение, которое я пробую ( см. ниже) Я либо получаю пустую страницу, либо страница не загружается (я думаю, что она застряла в al oop и не может выполнить обещание).

Попытки решения:

1. Использование промежуточного программного обеспечения, как показано ниже:

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

Использование asyncData, как показано ниже:

data(){
  return{
    filteredLocation: {}
  }
}

// snip

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

Я попытался изучить выборку, но, по-видимому, у вас больше нет доступа к 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. Создайте файл в папке Plugins (вы можете назвать его global. 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'
}
})

в global. js. Затем добавьте плагин в nuxt.config. js вот так.

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

Также убедитесь, что вы используете подчеркивание перед именем page_id в структуре папок.