コンテキスト
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
モードでのみ使用できます。
![Sébastien Chopin](/_nuxt/image/e847b9.png)
![Nazaré da Piedade](/_nuxt/image/d5c785.png)
![Nobu](/_nuxt/image/888ba6.png)
![川音리오](/_nuxt/image/345a82.png)
![Maciek Palmowski](/_nuxt/image/2bdab1.png)
![Nestor Vera](/_nuxt/image/b6ef28.png)
![Daniel Roe](/_nuxt/image/0786f3.png)
![Yue Yang](/_nuxt/image/40c994.png)
![Jeronimas](/_nuxt/image/ba9a98.png)
![Clément Ollivier](/_nuxt/image/77339c.png)
![Alexander Lichter](/_nuxt/image/073577.png)
![N3-rd](/_nuxt/image/20bdf5.png)
![Adrien Zaganelli](/_nuxt/image/c3f019.png)
![Mag](/_nuxt/image/1fe278.png)
![Stefan Huber](/_nuxt/image/c3653a.png)
![Olga Bulat](/_nuxt/image/e50af3.png)
![Paiva](/_nuxt/image/ea02f0.png)
![Florian Reuschel](/_nuxt/image/ee31ca.png)
![Savas Vedova](/_nuxt/image/d403a7.png)
![HIJACK](/_nuxt/image/d0b78e.png)
![Vinícius Alves](/_nuxt/image/ba75e5.png)
![Kareem Dabbeet](/_nuxt/image/c79dfa.png)
![Valentín Costa](/_nuxt/image/3dd0d7.png)
![Ryan Skinner](/_nuxt/image/ec2d86.png)
![Alex Hirzel](/_nuxt/image/980fb6.png)
![Ajeet Chaulagain](/_nuxt/image/2fb9d1.png)
![René Eschke](/_nuxt/image/ddfbaa.png)
![Nico Devs](/_nuxt/image/5fa1fe.png)
![Muhammad](/_nuxt/image/76bed9.png)
![Naoki Hamada](/_nuxt/image/475300.png)
![Tom](/_nuxt/image/aae9cc.png)
![Yann Aufray](/_nuxt/image/305a71.png)
![Anthony Chu](/_nuxt/image/027d85.png)
![Nuzhat Minhaz](/_nuxt/image/431077.png)
![Lucas Portet](/_nuxt/image/260cbe.png)
![Richard Schloss](/_nuxt/image/7f63ae.png)
![Bobby](/_nuxt/image/42cdae.png)
![bpy](/_nuxt/image/ecc096.png)
![Antony Konstantinidis](/_nuxt/image/1434b0.png)
![Hibariya](/_nuxt/image/febb5a.png)
![Jose Seabra](/_nuxt/image/ede04e.png)
![Eze](/_nuxt/image/f22c13.png)
![Florian Lefebvre](/_nuxt/image/e3705e.png)
![Lucas Recoaro](/_nuxt/image/8cdc5c.png)
![Julien SEIXAS](/_nuxt/image/40a795.png)