Contexto e Auxiliares

O contexto fornece informações adicionais e frequentemente opcionais sobre a requisição atual à aplicação.

O objeto context está disponível em funções de Nuxt específicas como asyncData , plugins , middleware  e nuxtServerInit . Este fornece à aplicação informações adicionais e muitas vezes opcionais sobre a requisição atual.

Primeiro e mais importante, o contexto é utilizado para fornecer acesso a outras partes da aplicação da Nuxt, por exemplo, o armazém de estado da Vuex ou a instância subjacente connect. Desta maneira, temos os objetos req e res do contexto disponível no lado do servidor e o store sempre disponível. Mas com o tempo, o contexto foi estendido com muitas outras variáveis e atalhos úteis. Agora temos acesso às funcionalidades da substituição de módulo instantânea em modo de development, a route atual, params e query da página, bem como a opção de acessar as variáveis de ambiente através do contexto. Além disto, as funções do módulo e os auxiliares podem ser expostos através do contexto para estarem disponíveis tanto no lado do cliente como no lado do servidor.

Todas as chaves de contexto que estão presentes por padrão

function (context) { // Poderia ser `asyncData`, `nuxtServerInit`, ...
  // Sempre disponíveis
  const {
    app,
    store,
    route,
    params,
    query,
    env,
    isDev,
    isHMR,
    redirect,
    error,
    $config
  } = context

  // Disponíveis apenas no lado do servidor
  if (process.server) {
    const { req, res, beforeNuxtRender } = context
  }

  // Disponíveis apenas no lado do cliente
  if (process.client) {
    const { from, nuxtState } = context
  }
}

Saber mais sobre as diferentes chaves de contexto no nosso Glossário Interno .

Utilizar parâmetros de página para a nossa consulta de API

O contexto expõe diretamente os possíveis parâmetros dinâmicos da rota por meio de context.params. No exemplo seguinte, chamamos uma interface de programação de aplicação através do módulo nuxt/http utilizando um parâmetro de página dinâmico como parte do endereço de localização de recurso (URL). Os módulos, como o módulo nuxt/http , podem expor as suas próprias funções, que ficam então disponíveis através do objeto context.app .

Além disto, embrulhamos a chamada à interface de programação de aplicação numa instrução try/catch para lidar com potenciais erros. Com a função context.error, podemos mostrar diretamente a página de erro da Nuxt e passar o erro ocorrido:

export default {
  async asyncData(context) {
    const id = context.params.id
    try {
      // Usar o módulo `nuxtjs/http` aqui exposto por `context.app`
      const post = await context.app.$http.$get(
        `https://api.nuxtjs.dev/posts/${id}`
      )
      return { post }
    } catch (e) {
      // Mostrar a página de erro seguinte com o erro lançado
      context.error(e)
    }
  }
}

Com a ECMAScript 6 , podemos utilizar esta sintaxe para desestruturar o nosso objeto de contexto. Podemos passar os objetos a que queremos ter acesso e depois podemos utilizá-los no código sem utilizar a palavra context.

export default {
  async asyncData({ params, $http, error }) {
    const id = params.id

    try {
      // Usar o módulo `nuxtjs/http` aqui exposto por `context.app`
      const post = await $http.$get(`https://api.nuxtjs.dev/posts/${id}`)
      return { post }
    } catch (e) {
      // Mostrar a página de erro seguinte com o erro lançado
      error(e)
    }
  }
}

Em vez disto, queremos utilizar parâmetros de consulta? Podemos então utilizar context.query.id .

Redirecionar os utilizares e acessar o armazém de estado

O acesso ao armazém de estado da Vuex (quando o temos configurado através do diretório store) também é possível através do contexto. Este fornece um objeto store que pode ser tratado como this.$store em componentes de Vue. Além disto, utilizamos o método redirect, um auxiliar exposto através do contexto, para redirecionar o utilizador no caso de o estado authenticated ser falso :

export default {
  middleware({ store, redirect }) {
    // recuperar chaves através de desestruturação de objetos
    const isAuthenticated = store.state.authenticated
    if (!isAuthenticated) {
      return redirect('/login')
    }
  }
}

Auxiliares

Para além dos atalhos no contexto, existem outros pequenos auxiliares presentes na nossa aplicação de Nuxt.

$nuxt: O auxiliar da Nuxt

O $nuxt é um auxiliar concebido para melhorar a experiência do utilizador e para ser uma escotilha de fuga em algumas situações. É acessível por this.$nuxt em componentes de Vue e por window.$nuxt caso contrário no lado do cliente.

Verificador de conexão

O auxiliar $nuxt fornece uma maneira rápida de descobrir se a conexão de Internet de um utilizador está presente ou não: Este expõe os valores booleanos isOffline e isOnline. Podemos utilizá-los para mostrar mensagem assim que o utilizador estiver desligado da rede (por exemplo):

<template>
  <div>
    <div v-if="$nuxt.isOffline">You are offline</div>
    <Nuxt />
  </div>
</template>

Acessar à instância de raiz

Além de fornecer recursos de experiência de programação e experiência de utilização, o auxiliar $nuxt também fornece um atalho para a instância raiz da nossa aplicação a partir de todos os outros componentes. Mas isto não é tudo — nós também podemos acessar o auxiliar $nuxt através de window.$nuxt que pode ser usado como uma escotilha de fuga para ganhar acesso a métodos de módulos como $axios de fora dos nossos componentes de Vue. Isto deve ser usado sensatamente e apenas como último recurso.

Atualizar os dados da página

Quando queremos atualizar a página atual para o utilizador, não queremos recarregar totalmente a página, porque podemos atingir o servidor novamente e, pelo menos, reiniciar toda a aplicação de Nuxt. Em vez disto, muitas vezes queremos apenas atualizar os dados, fornecidos por asyncData ou fetch.

Podemos fazer isto utilizando this.$nuxt.refresh()!

<template>
  <div>
    <div>{{ content }}</div>
    <button @click="refresh">Refresh</button>
  </div>
</template>

<script>
  export default {
    asyncData() {
      return { content: 'Created at: ' + new Date() }
    },
    methods: {
      refresh() {
        this.$nuxt.refresh()
      }
    }
  }
</script>

Controlar a barra de carregamento

Com $nuxt, podemos também controlar a barra de carregamento da Nuxt programaticamente por this.$nuxt.$loading:

export default {
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
}

Para mais informações, consultar o capítulo correspondente à funcionalidade de carregamento .

Auxiliar onNuxtReady

Se quisermos executar alguns programas depois que a nossa aplicação de Nuxt tiver sido carregada e estiver pronta, podemos usar a função window.onNuxtReady. Isto pode ser útil quando queremos executar uma função no lado do cliente sem aumentar o tempo de interação do nosso sítio:

window.onNuxtReady(() => {
  console.log('Nuxt is ready and mounted')
})

Auxiliares de Processo

A Nuxt injeta três valores booleanos (client, server, e static) no objeto global process que nos ajudará a determinar se a nossa aplicação foi desenhada no servidor ou totalmente no cliente, assim como verificar a geração de sítios estáticos. Estes auxiliares estão disponíveis em toda a nossa aplicação e são normalmente utilizadas no código do utilizador de asyncData:

<template>
  <h1>I am rendered on the {{ renderedOn }} side</h1>
</template>

<script>
  export default {
    asyncData() {
      return { renderedOn: process.client ? 'client' : 'server' }
    }
  }
</script>

No exemplo, renderedOn avaliará como 'server' quando se utiliza a interpretação do lado do servidor e um utilizador acessar à página diretamente. Quando o utilizador navegar para a página a partir de outra parte da aplicação, por exemplo, clicando num <NuxtLink>, este avaliará como cliente.