В чем разница между 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