context 是什麼？

概述

介紹

context 是一個包含當前執行環境上下文資訊的物件。可以想像成 Nuxt 在執行時打包好的一組工具箱，讓你在特定生命週期中可以方便存取所需的所有東西，例如路由資訊、Vuex 狀態、插件、HTTP 請求物件等。

context 的常見屬性

在 Nuxt 2 中，當使用以下這些方法時，Nuxt 會自動將 context 作為參數傳入：

  • asyncData
  • fetch（僅 Nuxt 2）
  • middleware
  • plugin
  • nuxtServerInit

常見的 context 屬性如下：

屬性 類型 說明
app Object Nuxt 應用本體，可用於存取全域功能與 Plugin，例如 app.$axios
store Vuex Store Vuex 狀態管理的 Store
route Route Object Vue Router 的 route 物件
params Object URL 中的動態路由參數，如 /users/:id
query Object URL 的查詢參數，如 ?page=2
req Node Request 只有在 SSR 模式下可用，Node.js 原生的 request 物件
res Node Response 同上，Node.js 原生的 response 物件
redirect Function 執行頁面導向
error Function 顯示 Nuxt 的錯誤頁面，例如 error({ statusCode: 404 })
env Object 透過 .env 設定的環境變數
$axios Axios Instance 若安裝 @nuxtjs/axios module，會自動注入
from Route Object 上一個路由（僅在 middleware 中可用）

使用

為什麼需要 context？

Nuxt 是一個 SSR 應用框架，在頁面還沒建立時（例如伺服器渲染階段）需要能夠知道以下這些狀況：

  • 使用者目前進入哪個頁面？
  • 路由中有哪些參數（params / query）？
  • 使用者是否已登入？（例如從 cookie 讀取 token）
  • 是否應該重導頁面？
  • 是否需要先從後端抓資料？

為了統一處理這些需求，Nuxt 將上述資訊打包成一個 context 物件，自動傳入給相關的生命週期函式。這樣開發者不需要手動從 route、store 等取得資料，只要存取 context 即可。

實例範例

在 asyncData 中使用 context

export default {
  async asyncData(context) {
    const id = context.params.id
    const res = await context.$axios.$get(`/api/user/${id}`)
    return { user: res }
  }
}

在 middleware 中使用 context

export default function ({ store, redirect }) {
  if (!store.state.auth.loggedIn) {
    return redirect('/login')
  }
}

注意事項

  • context 並非全域變數，僅在 Nuxt 特定生命週期（如 asyncData、middleware、plugin）中可用。
  • Vue component 中的 methods、mounted 等生命周期方法中無法使用 context，要改用 this.$route、this.$store 等。
  • 在 Composition API 中使用 setup()，也不能使用 context，應改用以下方法：
import { useRoute, useRouter, useNuxtApp } from '@nuxtjs/composition-api'

const route = useRoute()
const router = useRouter()
const { $axios } = useNuxtApp()

總結：context 使用對照表

特點 說明
✅ 方便存取 可直接取得 route、query、store、plugin 等
🧠 限定生命週期 僅在 asyncData、middleware 等特定函式中提供
⚠️ 不等同 this 與 component 的 this 無關，請勿混淆
💡 類似依賴注入 Nuxt 自動注入常用資源進 context

不同生命週期中 context 可否使用一覽表

生命週期 / 區塊 可取得 context 說明
nuxtServerInit(store, context) ✅ Yes 僅在 SSR 階段呼叫，可用來根據 cookie 初始化 store 狀態
asyncData(context) ✅ Yes 在頁面元件載入前執行，可用來取得資料並合併至 data
fetch(context)（Nuxt 2） ✅ Yes 與 asyncData 類似，但不會合併至 data，常用於更新 Vuex 狀態
middleware(context) ✅ Yes 可用於導頁、檢查權限
plugins(context, inject) ✅ Yes 用來封裝功能並注入至全域
serverMiddleware(req, res) ❌ No 原生 Node 中間層，無 Nuxt context，僅有 req / res
layout 中的 asyncData(context) ✅ Yes 在 layout 載入階段取得資料
setup()（Composition API） ❌ No 無法直接使用 context，需用 useRoute()、useNuxtApp() 等
Vue 元件中的 mounted, methods ❌ No context 不可用，請使用 this.$route, this.$store
Vuex actions, mutations ❌ No 一般無 context，唯 nuxtServerInit 例外

如需更詳細官方說明，可參考：Nuxt 2 Context 官方文件（請確認實際版本是否仍維護中）