Função Gatilho de Obtenção de Dados

A função gatilho fetch serve para buscar dados duma maneira assíncrona. É chamada no lado do servidor quando ao desenhar a rota, e no lado do cliente ao navegar.

Nuxt >= 2.12

A Nuxt v2.12 introduz uma nova função gatilho chamada fetch que podemos usar em qualquer um dos nossos componentes .vue, Usamos a fetch sempre que precisarmos de obter dados assíncronos. A fetch é chamada no lado do servidor ao desenhar a rota, e no lado do cliente ao navegar.

Expõe a $fetchState ao nível do componente:

• $fetchState.pending: Boolean, permite-nos mostrar um marcador de posição quando a fetch for chamada no lado do cliente.
• $fetchState.error: null ou Error, permite-nos mostrar uma mensagem de erro.
• $fetchState.timestamp: Integer, é um marcador de data e hora da última busca de dados, útil para armazenamento transitório com o keep-alive.

Se quisermos chamar a função gatilho fetch do nosso modelo de marcação de hipertexto, usamos:

<button @click="$fetch">Refresh</button>

ou método de componente:

// dos métodos dos componentes na secção de programação.
export default {
  methods: {
    refresh() {
      this.$fetch()
    }
  }
}

Podemos acessar o contexto da Nuxt dentro da função gatilho fetch usando this.$nuxt.context.

Opções

• fetchOnServer: Boolean ou Function (predefinida como: true), chama fetch quando a página é desenhada pelo servidor.
• fetchKey: String ou Function (a predefinição é o identificador do âmbito do componente ou o nome do componente), uma chave (ou uma função produz uma chave única) que identifica o resultado da pesquisa deste componente (disponível na Nuxt 2.15+) Mais informações disponíveis no pedido de atualização do repositório original .
• fetchDelay: Integer (predefinida como: 200), define o tempo mínimo de execução em milissegundos (para evitar intermitências rápidas).

Quando a fetchOnServer é false ou retorna false, fetch será chamada apenas no lado do cliente e $fetchState.pending retornará true quando o componente for desenhado no servidor:

<script>
  export default {
    data() {
      return {
        posts: []
      }
    },
    async fetch() {
      this.posts = await this.$http.$get('https://api.nuxtjs.dev/posts')
    },
    fetchOnServer: false,
    // vários componentes podem retornar a mesma `fetchKey` e
    // a Nuxt rastreará ambos separadamente
    fetchKey: 'site-sidebar',
    // Em alternativa, para um maior controlo,
    // pode ser passada uma função com acesso à instância do componente.
    // Será chamada na `created` e não deve depender de dados obtidos.
    fetchKey(getCounter) {
      // `getCounter` é um método que pode ser chamada para
      // obter o número seguinte numa sequência
      // como parte da geração duma `fetchKey` única.
      return this.someOtherData + getCounter('sidebar')
    }
  }
</script>