Как правильно использовать новый обработчик fetch () в nuxt 2.12 для SSR? - PullRequest
Новая
       92

Как правильно использовать новый обработчик fetch () в nuxt 2.12 для SSR?

0 голосов
/ 04 апреля 2020

Я обновил Nuxt до последней версии, потому что они представили новый fetch() хук. В моем проекте я получаю данные из Prismi c. Раньше я использовал asyncData(), но при навигации требовалось некоторое время, прежде чем отображать страницы, на которых вызывался asyncData() (вот как это работает).

Идеальным решением является навигация по этому конкретному странице, и покажите анимацию загрузки при получении данных. Новый хук fetch() кажется подходящим, потому что он предоставляет $fetchState.pending для проверки статуса операции.

Теперь код (я получаю подкатегории из категории в магазине): 

        data(){
            return{
                docs: []
            }
        },

        async fetch() {
            try{
                const res = await this.$prismic.api.query(this.$prismic.predicates.at('my.category.uid', this.$route.params.sub))
                const el = res.results[0]
                const query = await this.$prismic.api.query([this.$prismic.predicates.at('document.type','sub-category'), this.$prismic.predicates.at('my.sub-category.category', el.id)], { orderings: '[my.sub-category.position, my.sub-category.title]' })
                this.docs = query.results
            }   
            catch (e) {
                console.log(e)
            }
        }

Это работает по крайней мере на стороне клиента. Будет ли это работать для правильной SSR? Я имею в виду, что в asyncData() (который вызывается на стороне сервера), this недоступен, как и data(). Если это правильное решение, в чем смысл использовать asyncData() вместо fetch()?

Ответы [ 3 ]

1 голос
/ 05 апреля 2020

Что касается SSR, fetch используется так же, как asyncData (хотя есть разница во времени перехода страниц).

Разница между fetch и asyncData:

  • asyncData не имеет доступа к this, в то время как fetch (в Nuxt> = 2.12) имеет.
  • asyncData наборы возвращаемых значений данные компонента, в то время как возвращаемое значение fetch не имеет, потому что fetch уже имеет доступ к this, поэтому он может установить data напрямую.
  • fetch управляется две опции fetchOnServer и fetchDelay, а asyncData не имеет опций. Когда fetchOnServer (true по умолчанию) установлено на false, хук fetch называется только на стороне клиента.
  • fetch связан с объектом $fetchState, который обеспечивает pending и timestamp (связано с текущим состоянием операции выборки); и функция error (позволяет отображать сообщение об ошибке). Обратите внимание, что asyncData также предоставляет функцию error в аргументе context.
  • fetch позволяет быстрее переходить по страницам (согласно RF C 27 )

Помимо указанных выше различий, семантика двух методов идентична.

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

1 голос
/ 04 апреля 2020

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

        data(){
            return{
                loading: true
            }
        },

        async asyncData(context) {
            try{
                const res = await context.app.$prismic.api.query(context.app.$prismic.predicates.at('my.category.uid', context.app.$route.params.sub))
                const el = res.results[0]
                const query = await context.app.$prismic.api.query([context.app.$prismic.predicates.at('document.type','sub-category'), context.app.$prismic.predicates.at('my.sub-category.category', el.id)], { orderings: '[my.sub-category.position, my.sub-category.title]' })
                const docs = query.results
                const loading = false
                return {docs, el, loading}
            }   
            catch (e) {
                console.log(e)
            }
        }

, если вы используете prismi c, (и если вы не делали ' не зарегистрируйте его как плагин) вы можете добавить prismi c в контекст через плагин 

import prismic from 'prismic-javascript'

export default (inject) => {

    inject('prismic', prismic)
}

Так что теперь у вас есть доступ к $ prismi c в контексте.

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

plugins/loading.js

export default ({store},inject) => {
    inject('changeLoading', function(){
            store.dispatch('changeLoading')
        }
    )
}

store/index.js

export const state = () => ({
    loading: false
});

export const mutations = {
    CHANGE_LOADING(state){
        state.loading = !state.loading
    }
}

export const actions = {
    changeLoading({commit}){
        commit('CHANGE_LOADING')
    }
}

export const getters = {
    getLoading(state){
        return state.loading
    }
}

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

        data(){
            return{
                loading: this.$store.getters['getLoading']
            }
        },

        async asyncData(context) {
            try{
                context.app.$changeLoading()
                const prismicData = await context.app.$prismic(...)
                context.app.$changeLoading()
                return {prismicData}
            }   
            catch (e) {
                context.app.$changeLoading()
                console.log(e)
            }
        }
0 голосов
/ 05 апреля 2020

РАЗРЕШЕНО: Nuxt подтолкнул меня крошечным предупреждением о том, что требуется "выборка узла" по крайней мере в версии 2.6.0. По какой-то причине мой был в 2.1.2.

...