В чем разница между fetch и nuxtServerInit в Nuxt.js?

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

В каких случаях я должен использовать fetch и в каких случаях - nuxtServerInit?

2 ответа

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

fetch &asyncData вместо этого запускайте как клиент, так и сервер, как только эти страницы будут обработаны.

Это означает, что fetch & asyncData будет срабатывать каждый раз, когда компонент сопоставляется маршрутизатором и nuxtServerInit только один раз, в начале, на сервере, и никогда больше.

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

использование fetch/asyncData когда к определенной странице обращаются и вам нужно заполнить vuex store (или страницу data объект) для этой страницы специально.

nuxtServerInit: он используется для получения некоторых данных, с которыми вы много работаете (например, userInfo в сеансе), только один раз, затем вы можете использовать их во всех компонентах. Таким образом, вам не нужно постоянно обращаться к серверу. Более того, это действие в магазине, предоставляемое Vuex, поэтому оно будет автоматически отправлено Vuex.

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

Ссылки:https://nuxtjs.org/guide/vuex-store и https://nuxtjs.org/api/pages-fetch

Другие вопросы по тегам