nuxt context

해피데빙·2022년 11월 22일
0
  • nuxt에서 vue 컴포넌트에 추가적인 객체/파라미터를 제공
  • nuxt 생명주기 영역들에서 제공한다
    (asyncData, fetch, plugins, middleware and nuxtServerInit)

cf.vuex의 context와는 다른 것

function (context) {
  // Universal keys
  const {
    app,
    store,
    route,
    params,
    query,
    env,
    isDev,
    isHMR,
    redirect,
    error,
    $config
  } = context
  
  // Server-side 
  if (process.server) {
  //process는 그냥 제공되는 건가?
    const { req, res, beforeNuxtRender } = context
  }
  
  // Client-side
  if (process.client) {
    const { from, nuxtState } = context
  }
}

app
root Vue instance options that include app your plugins
ex. context.app.plugin이름

store
vuex store 인스턴스. vuex store를 설정하면 사용할 수 있다

ex. UV에서는 store.state.user.userInfo.userAgent를 통해 웹 크롤러인지 확인을 하고 있다 (이렇게 확인하는 이유는 일반 사용자가 요청을 한 게 아니기 때문에 401 등 에러 발생 시 따로 에러 처리를 해줄 필요가 없기 때문에)

route
vue router route 인스턴스

params
route.params랑 같은 거

query
route.query랑 같은 거

env
nuxt.config.js에 정의한 환경 변수

isDev
dev 환경인지 알려주는 불리언.

isHMR
webpack hot module replacement

redirect
사용자를 다른 루트로 redirect할 때 사용한다 (함수)
redirect([status,] path [, query])

redirect(302, '/login')
redirect({ name: 'slug', params: { slug: mySlug } })
redirect('https://vuejs.org')
profile
노션 : https://garrulous-gander-3f2.notion.site/c488d337791c4c4cb6d93cb9fcc26f17

0개의 댓글