コンテキスト
context は、Nuxt から Vue コンポーネントに追加のオブジェクト/パラメータを提供し、asyncData 、fetch 、plugins 、middleware そして nuxtServerInit のような特別な 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
app (NuxtAppOptions)
すべてのプラグインを含むルート Vue インスタンスのオプション。たとえば i18n を使用している場合は context.app.i18n で $i18n にアクセスできます。
store
store (Vuex Store )
Vuex の Store インスタンス。Vuex ストア が設定されている場合のみ使用できます。
route
route (Vue Router Route )
Vue Router の route インスタンス。
params
params (Object)
route.params のエイリアス。
query
query (Object)
route.query のエイリアス。
env
env (Object)
nuxt.config.js で設定された環境変数。env API を参照してください。
isDev
isDev (Boolean)
開発モードであるかどうかを示す真偽値で、本番環境で一部のデータをキャッシュするのに役立ちます。
isHMR
isHMR (Boolean)
メソッド/ミドルウェアが webpack の hot module replacement から呼び出されたかどうかを示す真偽値(開発モードのクライアントサイドでのみ true)。
redirect
redirect (Function)
ユーザーを別のルートにリダイレクトするには、このメソッドを使用してください。ステータスコードはサーバーサイドで使用され、デフォルトは 302 です。 redirect([status,] path [, query])。
例:
redirect(302, '/login')
redirect({ name: 'slug', params: { slug: mySlug } })
redirect('https://vuejs.org')
Location プロパティの詳細については、Vue Router のドキュメント を参照してください。
redirect や error を使用することはできません。有効な回避策は、window.onNuxtReady(() => { window.$nuxt.$router.push('/your-route') }) を使用することです。error
error (Function)
エラーページを表示するには、このメソッドを使用してください。例: error(params)。params には statusCode と message プロパティが必要です。
$config
$config (Object)
実際のランタイム設定 。
サーバーサイドのキー
これらのキーはサーバーサイドでのみ使用できます。
req
req (http.Request )
Node.js サーバーからのリクエスト。Nuxt がミドルウェアとして使われる場合、リクエストオブジェクトは使用しているフレームワークによって異なる可能性があります。nuxt generate では使用できません。
Res
res (http.Response )
Node.js サーバーからのレスポンス。Nuxt がミドルウェアとして使われる場合、レスポンスオブジェクトは使用しているフレームワークによって異なる可能性があります。nuxt generate では使用できません。
beforeNuxtRender
beforeNuxtRender(fn) (Function)
クライアントサイドでレンダリングされた __NUXT__ 変数を更新するには、このメソッドを使用してください。fn(非同期にもできます)は { Components, nuxtState } で呼び出されます。例 を参照してください。
クライアントサイドのキー
これらのキーはクライアントサイドでのみ使用できます。
from
from (Vue Router Route )
遷移元の route。
nuxtState
nuxtState (Object)
Nuxt の状態。ハイドレーション前のクライアントサイドで Nuxt の状態を取得するために beforeNuxtRender を使うプラグインに便利です。universal モードでのみ使用できます。
Clément Ollivier
Daniel Roe
Alex Hirzel
Ajeet Chaulagain
René Eschke
Sébastien Chopin
Nico Devs
Muhammad
Nazaré da Piedade
Naoki Hamada
Tom
Yann Aufray
Anthony Chu
Nuzhat Minhaz
Lucas Portet
Richard Schloss
Xanzhu
bpy
Antony Konstantinidis
Hibariya
Jose Seabra
Eze
Florian LEFEBVRE
Lucas
Julien SEIXAS
Hugo
Sylvain Marroufin
Spencer Cooley
Piotr Zatorski
Vladimir Semenov
Harry Allen
kazuya kawaguchi
Unai Mengual
Hyunseung Lee
Alexandre Chopin
pooya parsa
Nick Medrano
Mosaab Emam
Iljs Путлер Капут
Heitor Ramon Ribeiro
Nero
Yoon Han
Ikko Ashimine
FamCodings
Ayouli
F. Hinkelmann
felipesuri
Christophe Carvalho Vilas-Boas
Leoš Literák
Trizotti
Marcello Bachechi
Rodolphe
Thomas Underwood
Shek Evgeniy
Lukasz Formela
Hugo Torzuoli