Всем привет! Знатоки, поясните как правильно. 1)Норм практика ли забирать данные

Question

Всем привет! Знатоки, поясните как правильно. 1)Норм практика ли забирать данные

в дочерних компонентах из стора, данные эти получаем в родительском через fetch(), далее коммитим в стор. Или надо опускать их пропсами?

2)Объясните по русски разницу между asyncData и fetch на практических примерах. Где что лучше использовать? На данный момент склоняюсь к юзу fetch везде, поправьте если не так.

#nuxt.js #programming #russian #software

0

25.01.2022

19 ответов

41 просмотр

Maksym Anisimov

1. Лучше пропсами, так точно тестировать легче будет. Это дефолтная практика, когда есть родительский компонент, который забирает данные и раздает на дочерние через пропсы. 2. asyncData это хук который доступен только на страницах накста, данные которые возвращаешь в asyncData автоматом сливаются в обычную data. Нету доступа к this. Работает и на сервере, и на клиенте. Если на странице определена asyncData, то переход на нее будет блокироваться, пока все асинхронные операции там не закончатся (как и на сервере, так и на клиенте) fetch это хук который доступен в любом компоненте, по дефолту включен на сервере и на клиенте, но на сервере можно выключить. Есть доступ к this. На сервере страница не будет отдаваться, пока все fetch не завершатся, но на клиенте этот хук не блокирует рендеринг страницы, в отличии от asyncData. если ты не хочешь рисовать страницу, пока не получишь данные - бери asyncData, в других случаях можно брать fetch. Все что я написал работает для 2-й версии накста, в третьей намного легче с этим.

0

25.01.2022

Alex | KKteam Автор вопроса

Maksym Anisimov
1. Лучше пропсами, так точно тестировать легче буд...

Спасибо огромное за развернутый ответ!

0

25.01.2022

Alex | KKteam Автор вопроса

Maksym Anisimov
1. Лучше пропсами, так точно тестировать легче буд...

Касаемо google page speed как лучше делать? asyncData с lazy hydrate? Или есть другой способ? Как гугл относится к fetch?

0

25.01.2022

Maksym Anisimov

Alex | KKteam
Касаемо google page speed как лучше делать? asyncD...

Вам в целом без разницы, потому что и asyncData и fetch блокируют получение html на сервере, пока не пройдут запросы

0

25.01.2022

Alex | KKteam Автор вопроса

Maksym Anisimov
1. Лучше пропсами, так точно тестировать легче буд...

Вот еще пример. Есть данные в сторе, которые мы получаем при инициализации другого компонента, нам эти данные надо применить в дочернем компоненте, но уже другого компонента. Как будет правильнее сделать? Получить данные из стора в родительском и опускать пропсами? Когда много данных, получается много пропсов, не лаконично, или это норма?

0

25.01.2022

Vlad

Alex | KKteam
Вот еще пример. Есть данные в сторе, которые мы по...

эм, mapState

0

25.01.2022

Alex | KKteam Автор вопроса

Vlad
эм, mapState

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

0

25.01.2022

Vlad

Alex | KKteam
Я к тому что, плохая ли практика получать данные и...

а для чего надо прослеживать поток данных?

0

25.01.2022

Maksym Anisimov

Alex | KKteam
Вот еще пример. Есть данные в сторе, которые мы по...

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

0

25.01.2022

Alex | KKteam Автор вопроса

Vlad
а для чего надо прослеживать поток данных?

чтобы было красиво, понятно, наглядно

0

25.01.2022

Alex | KKteam Автор вопроса

Maksym Anisimov
Ну если эти компоненты не в одной иерархии, или ес...

Что скажете насчет модулей vuex? Удобная ли вещь и в каком контексте, если да?

0

25.01.2022