useCookies

universal-cookie のラッパー。

::: tip Nuxt 3 で使用する場合、この関数は Nuxt の組み込み useCookie() を優先するため、自動インポートされません。VueUse からこの関数を使用したい場合は、明示的にインポートしてください。 :::

インストール

npm i universal-cookie@^7

使用法

一般的な使用法

<script setup lang="ts">
import { useCookies } from '@vueuse/integrations/useCookies'

const cookies = useCookies(['locale'])
</script>

<template>
  <div>
    <strong>locale</strong>: {{ cookies.get('locale') }}
    <hr>
    <pre>{{ cookies.getAll() }}</pre>
    <button @click="cookies.set('locale', 'ru-RU')">
      Russian
    </button>
    <button @click="cookies.set('locale', 'en-US')">
      English
    </button>
  </div>
</template>

オプション

vue composition-api を使用してクッキーにアクセスし、変更します。

デフォルトでは、setup() 内で使用する必要がありますが、この関数は他の場所でも動作します。

import { useCookies } from '@vueuse/integrations/useCookies'
// ---cut---
const {
  get,
  getAll,
  set,
  remove,
  addChangeListener,
  removeChangeListener
} = useCookies(['cookie-name'], {
  doNotParse: false,
  autoUpdateDependencies: false
})

dependencies (オプション)

コンポーネントが依存するクッキー名のリストを指定するか、再レンダリングをトリガーするクッキー名を指定できます。指定しない場合、すべてのクッキー変更でレンダリングされます。

options (オプション)

• doNotParse (boolean = false): クッキーをオブジェクトに変換しないようにします。get/getAll メソッドにデフォルト値として渡されます。
• autoUpdateDependencies (boolean = false): get メソッドに提供されたクッキー名を自動的に追加します。true の場合、提供された dependencies を気にする必要はありません。

cookies (オプション)

universal-cookie インスタンスを提供できます（デフォルトでは新しいインスタンスを作成します）

利用可能なメソッドについては、universal-cookie api ドキュメントを参照してください。

createCookies([req])

リクエストを使用して universal-cookie インスタンスを作成し（デフォルトは window.document.cookie）、提供された universal-cookie インスタンスを持つ useCookies 関数を返します。

• req (object): Node の http.IncomingMessage リクエストオブジェクト