Nuxt 3 Release Candidate beta já está disponível! Descobre mais sobre isso v3.nuxtjs.org

Translated page Contents of this page might be outdated.

O contexto

O contexto fornece objetos/parâmetros adicionais do Nuxt para os componentes de Vue e está disponível em áreas especiais como asyncData , fetch , plugins , middleware e o nuxtServerInit do ciclo de vida do Nuxt.


Note que: "O contexto" que referimos aqui não é para ser confundido com o objeto context disponível nas Ações do Vuex . Os dois não estão relacionados.

function (context) {
  // Chaves Universais
  const {
    app,
    store,
    route,
    params,
    query,
    env,
    isDev,
    isHMR,
    redirect,
    error,
    $config
  } = context
  // No Lado do Servidor
  if (process.server) {
    const { req, res, beforeNuxtRender } = context
  }
  // No Lado do Cliente
  if (process.client) {
    const { from, nuxtState } = context
  }
}

Chaves universais

Essas chaves estão disponíveis em ambos lado do cliente e servidor.

app

app (NuxtAppOptions)

As opções da instância raiz do Vue que incluem todos os seus plugins. Por exemplo, quando estiver usando o i18n, você pode obter o acesso ao $i18n através do context.app.i18n.

store

store (Memória do Vuex )

Instância da Memória do Vuex. Apenas disponível se a memória do vuex estiver definida.

route

route (Rota do Roteador do Vue )

Instância da Rota do Roteador do Vue.

params

params (Object)

Pseudónimo de route.params.

query

query (Object)

Pseudónimo de route.query.

env

env (Object)

Variáveis de ambiente definidas dentro do ficheiro nuxt.config.js, consulte a API de env .

isDev

isDev (Boolean)

Booleano para permitir você saber se está em modo de desenvolvimento, pode ser útil para cacheamento de algum dado em produção.

isHMR

isHMR (Boolean)

Booleano que permite saber se o método/intermediário é chamado a partir da substituição instantânea de módulo do webpack (é true apenas no lado do cliente no modo de desenvolvimento).

redirect

redirect (Function)

Use este método para redirecionar o usuário para um outra rota, o código de estado é usado no lado do servidor, o estado padrão será 302. redirect([status,] path [, query]).

Exemplos:

redirect(302, '/login')
redirect({ name: 'slug', params: { slug: mySlug } })
redirect('https://vuejs.org')

Consulte a documentação do Roteador do Vue para mais informações sobre a propriedade location.

Não é possível usar o redirect ou error dentro do plugin do Nuxt no lado do cliente por causa da hidratação de erros (o conteúdo do cliente seria diferente daquilo que se esperaria do servidor).Um maneira válida de dar a volta a isso seria usando window.onNuxtReady(() => { window.$nuxt.$router.push('/your-route') })

error

error (Function)

Use este método para mostrar a página de erro: error(params). O params deve possuir as propriedades statusCode e message.

$config

$config (Object)

A atual configuração de tempo de execução .

Chaves do Lado do Servidor

Essas chaves apenas estão disponíveis no lado do servidor.

req

req (http.Request )

Requisição do servidor do Node.js. Se o Nuxt for usado como um intermediário, o objeto request pode ser diferente dependendo do framework que você estiver usando.
Não está disponível via nuxt generate.

Res

res (http.Response )

Resposta do servidor do Node.js. Se o Nuxt for usado como um intermediário, o objeto response pode ser diferente dependendo do framework que você estiver usando.
Não está disponível via nuxt generate.

beforeNuxtRender

beforeNuxtRender(fn) (Function)

Use este método para atualizar a variável __NUXT__ renderizada no lado do cliente, a função fn (pode ser assíncrona) is chamada com o objeto { Components, nuxtState }, consulte o exemplo .

Chaves do Lado do Cliente

Essas chaves estão apenas disponíveis no lado do cliente.

from

from (Rota do Roteador de Vue )

A rota de onde navegamos (onde nós saímos).

nuxtState

nuxtState (Object)

O estado do Nuxt, útil para plugins o qual usa o objeto beforeNuxtRender para receber o estado do Nuxt no lado do cliente antes da hidratação. Disponível apenas no modo universal.

Edit this page on GitHub Updated at Tue, Aug 16, 2022