사용법

페이지, 컴포넌트, 플러그인 내에서 useCookie를 사용하여 SSR 친화적인 방식으로 쿠키를 읽고 쓸 수 있습니다.

const cookie = useCookie(name, options)

타입

import type { Ref } from 'vue'
import type { CookieParseOptions, CookieSerializeOptions } from 'cookie-es'

export interface CookieOptions<T = any> extends Omit<CookieSerializeOptions & CookieParseOptions, 'decode' | 'encode'> {
  decode?(value: string): T
  encode?(value: T): string
  default?: () => T | Ref<T>
  watch?: boolean | 'shallow'
  readonly?: boolean
}

export interface CookieRef<T> extends Ref<T> {}

export function useCookie<T = string | null | undefined>(
  name: string,
  options?: CookieOptions<T>
): CookieRef<T>

매개변수

name: 쿠키의 이름입니다.

options: 쿠키 동작을 제어하는 옵션입니다. 객체는 다음 속성을 가질 수 있습니다:

대부분의 옵션은 cookie 패키지에 직접 전달됩니다.

반환 값

쿠키 값을 나타내는 Vue Ref<T>를 반환합니다. ref를 업데이트하면 쿠키가 업데이트됩니다 (readonly가 설정되지 않은 경우). ref는 SSR 친화적이며 클라이언트와 서버 모두에서 작동합니다.

예제

기본 사용법

아래 예제는 counter라는 쿠키를 생성합니다. 쿠키가 존재하지 않으면 처음에는 무작위 값으로 설정됩니다. counter 변수를 업데이트할 때마다 쿠키도 이에 따라 업데이트됩니다.

<script setup lang="ts">
const counter = useCookie('counter')

counter.value = counter.value || Math.round(Math.random() * 1000)
</script>

<template>
  <div>
    <h1>Counter: {{ counter || '-' }}</h1>
    <button @click="counter = null">reset</button>
    <button @click="counter--">-</button>
    <button @click="counter++">+</button>
  </div>
</template>

읽기 전용 쿠키

<script setup lang="ts">
const user = useCookie(
  'userInfo',
  {
    default: () => ({ score: -1 }),
    watch: false
  }
)

if (user.value) {
  // 실제 `userInfo` 쿠키는 업데이트되지 않습니다.
  user.value.score++
}
</script>

<template>
  <div>User score: {{ user?.score }}</div>
</template>

쓰기 가능한 쿠키

<script setup lang="ts">
const list = useCookie(
  'list',
  {
    default: () => [],
    watch: 'shallow'
  }
)

function add() {
  list.value?.push(Math.round(Math.random() * 1000))
  // list 쿠키는 이 변경으로 업데이트되지 않습니다.
}

function save() {
  if (list.value) {
    // 실제 `list` 쿠키는 업데이트됩니다.
    list.value = [...list.value]
  }
}
</script>

<template>
  <div>
    <h1>List</h1>
    <pre>{{ list }}</pre>
    <button @click="add">Add</button>
    <button @click="save">Save</button>
  </div>
</template>

API 경로에서의 쿠키

서버 API 경로에서 쿠키를 설정하기 위해 h3 패키지의 getCookie와 setCookie를 사용할 수 있습니다.

export default defineEventHandler(event => {
  // counter 쿠키 읽기
  let counter = getCookie(event, 'counter') || 0

  // counter 쿠키를 1 증가
  setCookie(event, 'counter', ++counter)

  // JSON 응답 전송
  return { counter }
})