каков случай использования NuxtJs asyncData?

Question

Насколько я знаю, asyncData функция на страницах NuxtJs отображается на стороне сервера перед созданием компонента. А также, когда пользователь перемещается между страницами внутри после загрузки страницы. Функция fetch очень похожа, но мы можем установить для нее значение store и проверить, существуют ли данные в store при изменении маршрута ...

Теперь вопрос в том, почему я хочу отправитьзапрос к API как в обновлении страницы, так и в изменении маршрута? Не лучше ли использовать функцию fetch и хранить данные в хранилище vuex, чтобы не было необходимости в дальнейших вызовах API? какие данные нужны для извлечения внутри функции asyncData?

Например, если я хочу показать список постов в приложении на стороне сервера, я думаю, что лучший способ - это использовать fetch свойство для заполнения vuex store, и после этого при каждом изменении маршрута у меня будут данные в хранилище, и нет необходимости в вызове API.

Answer 1

Вариант использования предназначен для извлечения данных, которые относятся только к определенной странице .

Например, у вас есть несколько конечных точек, которые возвращают данные о конкретных животных, / api / cats,/ api / dogs, /api/birds.

Когда вы загружаете theapp.com/cats в браузере, функция asyncData извлекает данные из / api / cats и отображает его на стороне сервера.

Аналогично, для theapp.com/dogs он выбирает /api/dogs.

Вариант использования изменяется, если существует конечная точка / api / animalsкоторый содержит ВСЕ данные о животных в одном фиде (собаки, кошки и птицы).

В этом случае вы должны выполнить поиск один раз, чтобы заполнить хранилище всеми данными страницы чем-то вроде nuxtServerInit