Nuxtのcontext(コンテキスト)について解説 / 実験していきます。
細かく・正確な解説はNuxtの公式サイトを確認頂けたらと思います。
が、
実際にcontextを呼び出して中身を確認しつつ、アクセス方法を実験していきたいと思います。
Q. Nuxtのcontext(コンテキスト)とは
Vueオブジェクトのプロパティ、メソッドへアクセス、操作可能な変数です。
特定のライフサイクル内でのみ利用可能です。
（極端に解釈すると、特定の場所から呼び出せるグローバルなNuxt（Vue）情報を含んだ変数です。）
context内には様々な情報を含んでいます。 様々なキー
注意 「Nuxtのcontext」と「Vuexのcontext」は別物なので混合しないようにしてください。
Q. Nuxtのcontextを呼び出す場所
context は、Nuxt から Vue コンポーネントに追加のオブジェクト/パラメータを提供し、asyncData 、fetch 、plugins 、middleware そして nuxtServerInit のような特別な Nuxt ライフサイクル内で使用できます。
https://develop365.gitlab.io/nuxtjs-2.8.X-doc/ja/api/context/
上記あるように「asyncData 、fetch 、plugins 、middleware 、nuxtServerInit」からcontextを呼び出すことが出来る。
Q. Nuxtのcontextを呼び出す方法
では、実際にcontextを呼び出してみます。
上記のライフサイクルのみで呼び出し可能です。
A, fetchから呼び出す。Component内（ページ、レイアウトカラム内でも）
<script>
export default {
// 省略
fetch(context) {
console.log(context);
},
// 省略
}
</script>
下記のような結果が取得出来ました。
インストールしているライブラリなどによってもcontextで取得できる内容は変わります。
$axios: ƒ wrap()
$config: {_app: {…}}
$vuetify: {…}
app: {head: {…}, store: Store, router: VueRouter, nuxt: {…}, render: ƒ, …}
base: "/"
env: {}
error: ƒ ()
from: {name: 'index', meta: Array(1), path: '/', hash: '', query: {…}, …}
isDev: true
isHMR: false
isStatic: false
next: ƒ ()
nuxtState: {config: {…}}
params: {}
payload: undefined
query: {}
redirect: ƒ (status, path, query)
route: {name: 'index', meta: Array(1), path: '/', hash: '', query: {…}, …}
store: Store {_committing: false, _actions: {…}, _actionSubscribers: Array(1), _mutations: {…}, _wrappedGetters: {…}, …}
_errored: false
_redirected: false
A, middlewearから呼び出す。
app/middleware/test.js
export default function(context){
console.log(context);
}
app/layouts/default.vue
layoutのmiddlewearにtest.jsを適用
<script>
export default {
//省略
middleware: ['test'],
//省略
</script>
同じ結果が取得出来ました。
Q. 指定のライフサイクル以外で取得は不可?
出来ません。mountedから呼び出してみます。
<script>
export default {
// 省略
mounted(context) {
console.log(context);
},
// 省略
}
</script>
結果は undefined が返ってきます。
Q. contextデータ大きすぎて、使いづらい?
分割代入を利用することで、必要なデータのみを取得することが可能です。
例えば、context内に存在する、appオブジェクトのみを取得したい場合には、下記のように分割代入で取得
A, fetchから呼び出す。Component内（ページ、レイアウトカラム内でも）
<script>
export default {
// 省略
fetch({app}) {
console.log(app);
},
// 省略
}
</script>
下記のようなappの中身のみ取得
{head: {…}, store: Store, router: VueRouter, nuxt: {…}, render: ƒ, …}
$axios: ƒ wrap()
$config: {_app: {…}}
beforeCreate: ƒ beforeCreate()
components: {NuxtLoading: {…}}
computed: {isOffline: ƒ, isFetching: ƒ}
context: {isStatic: false, isDev: true, isHMR: false, app: {…}, store: Store, …}
created: ƒ created()
data: ƒ data()
head: {title: 'app', htmlAttrs: {…}, meta: Array(4), link: Array(3), style: Array(0), …}
methods: {refreshOnlineStatus: ƒ, refresh: ƒ, errorChanged: ƒ, setLayout: ƒ, loadLayout: ƒ}
mounted: ƒ mounted()
nuxt: {…}
render: ƒ render(h, props)
router: VueRouter {app: Vue, apps: Array(1), options: {…}, beforeHooks: Array(2), resolveHooks: Array(0), …}
store: Store {_committing: false, _actions: {…}, _actionSubscribers: Array(1), _mutations: {…}, _wrappedGetters: {…}, …}
vuetify: Vuetify {framework: {…}, installed: Array(7), preset: {…}, userPreset: {…}}
watch: {nuxt.err: 'errorChanged'}
[[Prototype]]: Object