O Gatilho Fetch

O gatilho fetch serve para requisição assíncrona de dados. Ele é chamado no lado do servidor quando estiver renderizando a rota, e no lado do cliente quando estiver navegando entre as rotas.

Em versões do Nuxt maiores ou igual 2.12

A versão 2.12 do Nuxt introduz um novo gatilho chamado fetch o qual você pode usar dentro de qualquer um de seus componentes de Vue. Use o fetch toda vez que você precisar receber dados assíncronos. O fetch é chamado no lado do servidor quando estiver renderizando a rota, e no lado do cliente quando estiver navegando entre as rotas.

Ele expõe o $fetchState no nível de componente:

• $fetchState.pending: Boolean, permite você mostrar um segurador de espaço quando o fetch estiver sendo chamado no lado do cliente.
• $fetchState.error: null ou Error, permite você mostrar uma mensagem de erro
• $fetchState.timestamp: Integer, é uma referência a data e hora da última requisição, útil para cacheamento com o keep-alive

Se você quiser chamar o gatilho fetch a partir do seu modelo, use:

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

ou método de componente:

// a partir de métodos de componente na secção de roteiro (script)
export default {
  methods: {
    refresh() {
      this.$fetch()
    }
  }
}

Você pode acessar o contexto do Nuxt dentro do gatilho fetch usando o this.$nuxt.context.

Opções

• fetchOnServer: Boolean ou Function (valor padrão: true), chama o fetch() quando o servidor estiver renderizando a página
• fetchKey: String ou Function (padroniza para identificador do escopo de componente ou nome de componente), uma chave (ou uma função que produz uma chave única) que identifica o resultado da requisição deste componente(disponível desde a versão 2.15 do Nuxt) Mais informações estão disponíveis na PR original .
• fetchDelay: Integer (valor padrão: 200), define em milissegundos o tempo mínimo de execução (para evitar piscadelas)

Quando o fetchOnServer for falso (false ou retornar false), o fetch será chamado apenas no lado do cliente e o $fetchState.pending retornará true quando o servidor estiver renderizando o componente.

<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 o mesmo `fetchKey` e o Nuxt rastreará ambos eles separadamente
    fetchKey: 'site-sidebar',
    // alternativamente, para mais controle, uma função pode ser passada com o acesso à instância do componente
    // Ela será chamada dentro do gatilho `created` e não deve depender de um dado requisitado
    fetchKey(getCounter) {
      // `getCounter` é um método que pode ser chamado para receber o próximo número dentro de uma sequência
      // como parte de geração de uma `fetchKey` única.
      return this.someOtherData + getCounter('sidebar')
    }
  }
</script>