Загрузка asyn c данных в хранилище vuex при загрузке приложения Nuxt

Question

Я испытываю проект в Nuxt. Мне это нравится до сих пор, за исключением того, что я немного озадачен тем, как загрузить данные из внешнего асинхронного сервиса c, чтобы он был доступен в Vuex с самого первого маршрута.

Я попытался добавить middleware в макете по умолчанию для отправки действия магазина, но я не вижу, чтобы сервис вызывался сразу. Только когда я углубляюсь в маршруты, я вижу отправленное действие.

Я сделал нечто подобное в стандартном проекте Vue и добавил метод created к App.vue. Есть ли подобный способ в Nuxt?

Answer 1

То, что вам нужно, называется fetch .

Метод fetch , если установлен, вызывается каждый раз перед загрузкой компонента ( только для компоненты страницы ). Он будет вызываться на стороне сервера один раз (при первом запросе к приложению Nuxt) и на стороне клиента при переходе к следующим маршрутам.

Предупреждение: Вы не не имеет доступа к экземпляру компонента через эту внутреннюю выборку, потому что он вызывается до запуска компонента.

async fetch({ store }) {
  await store.dispatch('your-action')
}

Если вам нужен параметр:

async fetch({ store, params }) {
  await store.dispatch('your-action', params.id)
}

Я привел пример id. Имя параметра зависит от имени вашей страницы.

_id => params.id
_slug => parmas.slug
...