useCookie · Nuxt Composables v4

使用方法

ページ、コンポーネント、プラグイン内で、useCookieを使用して、SSRフレンドリーな方法でクッキーを読み書きできます。

const cookie = useCookie(name, options)

useCookieはNuxtコンテキストでのみ機能します。

返されるrefは、クッキーの値を自動的にJSONにシリアライズおよびデシリアライズします。

タイプ

署名

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パッケージに渡されます。

プロパティ	タイプ	デフォルト	説明
`decode`	`(value: string) => T`	`decodeURIComponent` + destr.	クッキーの値をデコードするカスタム関数。クッキーの値は文字セットが限られており（単純な文字列でなければなりません）、この関数を使用して、以前にエンコードされたクッキー値をJavaScript文字列または他のオブジェクトにデコードできます。注: この関数からエラーがスローされた場合、元の、デコードされていないクッキー値がクッキーの値として返されます。
`encode`	`(value: T) => string`	`JSON.stringify` + `encodeURIComponent`	クッキーの値をエンコードするカスタム関数。クッキーの値は文字セットが限られており（単純な文字列でなければなりません）、この関数を使用して、クッキーの値に適した文字列に値をエンコードできます。
`default`	`() => T \| Ref<T>`	`未定義`	クッキーが存在しない場合のデフォルト値を返す関数。関数は`Ref`を返すこともできます。
`watch`	`boolean \| 'shallow'`	`true`	変更を監視してクッキーを更新するかどうか。`true`はディープウォッチ、`'shallow'`はシャローウォッチ（トップレベルプロパティのデータ変更のみ）、`false`は無効化。注: クッキーが`refreshCookie`で変更された場合、`useCookie`の値を手動で更新してください。
`readonly`	`ブール値`	`false`	`true`の場合、クッキーへの書き込みを無効にします。
`maxAge`	`number`	`未定義`	クッキーの最大有効期間（秒単位）。つまり、`Max-Age` `Set-Cookie`属性の値。指定された数値は切り捨てられて整数に変換されます。デフォルトでは、最大有効期間は設定されません。
`expires`	`Date`	`未定義`	クッキーの有効期限。デフォルトでは、有効期限は設定されません。ほとんどのクライアントはこれを「非永続的なクッキー」とみなし、ウェブブラウザアプリケーションの終了などの条件で削除します。注:cookie storage model specificationによると、`expires`と`maxAge`の両方が設定されている場合、`maxAge`が優先されますが、すべてのクライアントがこれに従うとは限らないため、両方が設定されている場合は、同じ日時を指すようにしてください。 `expires`と`maxAge`のどちらも設定されていない場合、クッキーはセッションのみとなり、ユーザーがブラウザを閉じると削除されます。
`httpOnly`	`ブール値`	`false`	HttpOnly属性を設定します。注: これを`true`に設定する場合は注意してください。準拠しているクライアントは、クライアント側のJavaScriptが`document.cookie`でクッキーを見ることができなくなります。
`secure`	`ブール値`	`false`	設定します`Secure` `Set-Cookie`属性. 注: これを`true`に設定する場合は注意してください。準拠しているクライアントは、ブラウザがHTTPS接続を持っていない場合、今後サーバーにクッキーを返しません。これにより、ハイドレーションエラーが発生する可能性があります。
`partitioned`	`ブール値`	`false`	設定します`Partitioned` `Set-Cookie`属性. 注: これはまだ完全に標準化されていない属性であり、将来変更される可能性があります。また、多くのクライアントはこれを理解するまでこの属性を無視する可能性があります。詳細については、提案.
`ドメイン`	`文字列`	`未定義`	設定します`Domain` `Set-Cookie`属性。デフォルトではドメインは設定されず、ほとんどのクライアントはクッキーを現在のドメインのみに適用すると見なします。
`パス`	`文字列`	`'/'`	設定します`Path` `Set-Cookie`属性。デフォルトでは、パスは"デフォルトパス".
`sameSite`	`boolean \| string`	`未定義`	設定します`SameSite` `Set-Cookie`属性. - `true`は、厳格な同一サイトポリシーのために`SameSite`属性を`Strict`に設定します。 - `false`は、`SameSite`属性を設定しません。 - `'lax'`は、緩やかな同一サイトポリシーのために`SameSite`属性を`Lax`に設定します。 - `'none'`は、明示的なクロスサイトクッキーのために`SameSite`属性を`None`に設定します。 - `'strict'`は、厳格な同一サイトポリシーのために`SameSite`属性を`Strict`に設定します。

戻り値

クッキー値を表すVueのRef<T>を返します。refを更新するとクッキーが更新されます（readonlyが設定されていない限り）。refはSSRフレンドリーであり、クライアントとサーバーの両方で機能します。

例

基本的な使い方

以下の例では、counterというクッキーを作成します。クッキーが存在しない場合、最初はランダムな値に設定されます。counter変数を更新するたびに、クッキーもそれに応じて更新されます。

app/app.vue

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

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) {
  // the actual `userInfo` cookie will not be updated
  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 cookie won't be updated with this change
}

function save () {
  // the actual `list` cookie will be updated
  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ルートでのクッキー

getCookieとsetCookieをh3パッケージから使用して、サーバーAPIルートでクッキーを設定できます。

server/api/counter.ts

export default defineEventHandler((event) => {
  // Read counter cookie
  let counter = getCookie(event, 'counter') || 0

  // Increase counter cookie by 1
  setCookie(event, 'counter', ++counter)

  // Send JSON response
  return { counter }
})

Docs > 4 X > Examples > Advanced > Use Cookieでライブサンプルを読んで編集できます。

お役に立ちましたか？

問題を報告またはGitHub でこのページを編集

useAsyncData

useAsyncDataは、SSRフレンドリーなコンポーザブルで非同期に解決されるデータへのアクセスを提供します。

useError

useErrorコンポーザブルは、処理中のグローバルなNuxtエラーを返します。