Разница между Asyncdata vs Fetch

Какая разница между выборкой и асинхронными данными. В официальной документации говорится следующее:

asyncData

Вы можете захотеть получить данные и отобразить их на стороне сервера. Nuxt.js добавляет метод asyncData, который позволяет обрабатывать операции async перед установкой данных компонента.

asyncData вызывается каждый раз перед загрузкой компонента (только для компонентов страницы). Его можно вызвать со стороны сервера или до перехода на соответствующий маршрут. Этот метод получает объект контекста в качестве первого аргумента, вы можете использовать его для извлечения некоторых данных и возврата данных компонента.

получать

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

Метод fetch получает объект контекста в качестве первого аргумента, мы можем использовать его для извлечения некоторых данных и заполнения хранилища. Чтобы сделать метод выборки асинхронным, верните Promise, nuxt.js будет ожидать, что обещание будет разрешено перед рендерингом компонента.

Fetch используется для заполнения хранилища данными? Но в asyncData это также возможно совершить через магазин? Я не понимаю, почему есть два метода.

Оба метода работают на стороне сервера при начальной загрузке, после чего, когда вы перемещаетесь по заявке, она работает на стороне клиента.

Может ли кто-нибудь объяснить мне преимущество использования этих методов над другим?

Спасибо за помощь.

Ответ 1

Позвольте мне повторить несколько пунктов в качестве предлога к тому, что я собираюсь сказать

asyncData может устанавливать объекты уровня компонента и обращаться к хранилищу vuex
fetch не может устанавливать объекты уровня компонента, но имеет доступ к хранилищу vuex
Оба asyncData и fetch будет запущен на стороне сервера во время начальной загрузки
После начальной загрузки asyncData и fetch сработают при вызове соответствующих маршрутов страницы

1) если ваш дизайн

Используйте хранилище vuex в качестве центрального хранилища
Доступ к данным из хранилища vuex для всего приложения

затем use fetch

2) если ваш дизайн

Используйте хранилище vuex в качестве центрального хранилища
Есть опции для установки объектов уровня компонента
Данные, полученные по определенному маршруту, используются только одним компонентом
Нужна гибкость, чтобы иметь разрешение либо на хранилище vuex, либо на установку объекта уровня компонента

затем use asyncData

Может кто-нибудь объяснить мне преимущество использования этих методов над другой?

я не вижу никаких недостатков в использовании asyncData или fetch

Выбор asyncData или fetch полностью зависит от вашей архитектуры

Ответ 2

Я хотел бы отметить одну вещь, о которой я не упомянул выше (по крайней мере, не совсем ясно). asyncData автоматически объединяет данные в объект страницы(). Выборка не С fetch, это до вас, чтобы делать с данными, как вам угодно.

Ответ 3

I. fetch и asyncData обрабатываются на стороне сервера.

II. можно увидеть разницу в способах их использования:

а) извлечь: изменить данные магазина

<script>
export default {
  async fetch ({ store, params }) {
    await store.dispatch('GET_STARS');
  }
}
</script>

b) asyncData: изменить контекст (данные компонента)

<script>
export default {
  asyncData (context) {
    return { project: 'nuxt' }
  }
}
</script>