event.context.paramsとは
Nuxt 4のevent.context.paramsは、サーバーAPIの動的ルートに含まれるパラメータを取得するためのオブジェクトです。
例えば、次のファイルがあるとします。
server/api/users/[id].ts
このAPIに、
/api/users/123
でアクセスすると、
[id].get.ts
import type { User, ReturnJSONUsers } from '@/interfaces'
import { createUserList } from '@/usersDB'
export default defineEventHandler((event): ReturnJSONUsers => {
const userList = createUserList()
const id = parseInt(event.context.params?.id ?? '')
const user = userList.get(id) as User
return {
data: [user],
}
})event.context.paramsは概ね次のようになります。
{
id: '123'
}
そのため、
event.context.params.id
で '123' を取得できます。
Nuxt 4ではgetRouterParam()が使える
Nuxt 4では、次のように書くことができます。
[id].get.ts
import type { User, ReturnJSONUsers } from '@/interfaces'
import { createUserList } from '@/usersDB'
export default defineEventHandler((event): ReturnJSONUsers => {
const userList = createUserList()
const id = parseInt(getRouterParam(event, 'id') ?? '')
const user = userList.get(id) as User
return {
data: [user],
}
})これはパラメータを取得できるNuxtのヘルパーです。
特定のパラメータを1つ取得するなら、getRouterParam()のほうが意図が分かりやすいです。
該当するキーが存在しない場合はundefinedを返し、URLエンコードされている場合にデコードする処理も実行されるので、getRouterParam()だと人によって処理結果が変わることも少なくなります。
パラメータを複数取得したい場合は、getRouterParams()で取得できます。
[id].get.ts
const params = getRouterParams(event)
const userId = parseInt(params.id ?? '')
const user = userList.get(userId) as User数値変換はNumberではなくparseIntを使用する
返すのは文字列またはundefinedなので、数値に変換する際はNumberではなく、parseIntを使用してください。
Numberだと返り値が空文字のときに0に変換されてしまいます。
const id = ''
console.log(Number(id)) // 0
console.log(parseInt(id)) // NaN
