コンテキスト

context は、Nuxt から Vue コンポーネントに追加のオブジェクト/パラメータを提供し、asyncDatafetchpluginsmiddlewarenuxtServerInit のような特別な Nuxt ライフサイクル内で使用できます。

注意: ここで言う「コンテキスト」と、Vuex のアクションの中で使用できる context オブジェクトを混同しないでください。2 つは無関係です。

function (context) {
  // ユニバーサルなキー
  const {
    app,
    store,
    route,
    params,
    query,
    env,
    isDev,
    isHMR,
    redirect,
    error,
    $config
  } = context
  // サーバーサイド
  if (process.server) {
    const { req, res, beforeNuxtRender } = context
  }
  // クライアントサイド
  if (process.client) {
    const { from, nuxtState } = context
  }
}

ユニバーサルなキー

これらのキーは、クライアントサイドとサーバーサイドの両方で使用できます。

app

appNuxtAppOptions

すべてのプラグインを含むルート Vue インスタンスのオプション。たとえば i18n を使用している場合は context.app.i18n$i18n にアクセスできます。

store

storeVuex Store

Vuex の Store インスタンス。Vuex ストアが設定されている場合のみ使用できます

route

routeVue Router Route

Vue Router の route インスタンス。

params

paramsObject

route.params のエイリアス。

query

queryObject

route.query のエイリアス。

env

envObject

nuxt.config.js で設定された環境変数。env api を参照してください。

isDev

isDevBoolean

開発モードであるかどうかを示すブール値で、本番環境で一部のデータをキャッシュするのに役立ちます。

isHMR

isHMRBoolean

メソッド/ミドルウェアが webpack の hot module replacement から呼び出されたかどうかを示すブール値(開発モードのクライアントサイドでのみ true)。

redirect

redirectFunction

ユーザーを別のルートにリダイレクトするには、このメソッドを使用してください。ステータスコードはサーバーサイドで使用され、デフォルトは 302 です。 redirect([status,] path [, query])

例:

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

Location プロパティの詳細については、Vue Router のドキュメントを参照してください。

ハイドレーションエラー(クライアントの内容が、サーバーが返すものと異なってしまう)のため、クライアントサイド限定の Nuxt プラグインの中では redirecterror を使用することはできません。

有効な回避策は、window.onNuxtReady(() => { window.$nuxt.$router.push('/your-route') }) を使用することです。

error

errorFunction

エラーページを表示するには、このメソッドを使用してください。例: error(params)params には statusCodemessage プロパティが必要です。

$config

$configObject

実際のランタイム設定

サーバーサイドのキー

これらのキーはサーバーサイドでのみ使用できます。

req

reqhttp.Request

Node.js サーバーからのリクエスト。Nuxt がミドルウェアとして使われる場合、リクエストオブジェクトは使用しているフレームワークによって異なる可能性があります。
nuxt generate では使用できません

Res

reshttp.Response

Node.js サーバーからのレスポンス。Nuxt がミドルウェアとして使われる場合、レスポンスオブジェクトは使用しているフレームワークによって異なる可能性があります。
nuxt generate では使用できません

beforeNuxtRender

beforeNuxtRender(fn)Function

クライアントサイドでレンダリングされた __NUXT__ 変数を更新するには、このメソッドを使用してください。fn(非同期にもできます)は { Components, nuxtState } で呼び出されます。を参照してください。

クライアントサイドのキー

これらのキーはクライアントサイドでのみ使用できます。

from

fromVue Router Route

遷移元の route。

nuxtState

nuxtStateObject

Nuxt の状態。ハイドレーション前のクライアントサイドで Nuxt の状態を取得するために beforeNuxtRender を使うプラグインに便利です。universal モードでのみ使用できます

Contributors

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する