useCookies

カテゴリ

@Integrations

エクスポートサイズ

691 B

パッケージ

@vueuse/integrations

最終更新

先週

universal-cookie のラッパー。

ヒント

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

@vueuse/integrations アドオンで利用可能です。

インストール

bash

npm i universal-cookie@^7

使い方

一般的な使い方

vue

<script>
import { useCookies } from '@vueuse/integrations/useCookies'
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const cookies = useCookies(['locale'])
    return {
      cookies,
    }
  },
})
</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 を使用して Cookie にアクセスおよび変更します。

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

const { get, getAll, set, remove, addChangeListener, removeChangeListener } = useCookies(['cookie-name'], { doNotParse: false, autoUpdateDependencies: false })

`dependencies` (オプション)

コンポーネントが依存する、または再レンダリングをトリガーする必要がある Cookie 名のリストをオプションで指定できます。指定しない場合は、すべての Cookie の変更でレンダリングされます。

`options` (オプション)

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

`cookies` (オプション)

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

universal-cookie api ドキュメントで利用可能なメソッドに関する情報

`createCookies([req])`

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

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

型宣言

型宣言を表示

typescript

/**
 * Creates a new {@link useCookies} function
 * @param req - incoming http request (for SSR)
 * @see https://github.com/reactivestack/cookies/tree/master/packages/universal-cookie universal-cookie
 * @description Creates universal-cookie instance using request (default is window.document.cookie) and returns {@link useCookies} function with provided universal-cookie instance
 */
export declare function createCookies(req?: IncomingMessage): (
  dependencies?: string[] | null,
  {
    doNotParse,
    autoUpdateDependencies,
  }?: {
    doNotParse?: boolean | undefined
    autoUpdateDependencies?: boolean | undefined
  },
) => {
  /**
   * Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
   */
  get: <T = any>(name: string, options?: CookieGetOptions | undefined) => T
  /**
   * Reactive get all cookies
   */
  getAll: <T = any>(options?: CookieGetOptions | undefined) => T
  set: (
    name: string,
    value: any,
    options?: CookieSetOptions | undefined,
  ) => void
  remove: (name: string, options?: CookieSetOptions | undefined) => void
  addChangeListener: (callback: CookieChangeListener) => void
  removeChangeListener: (callback: CookieChangeListener) => void
}
/**
 * Reactive methods to work with cookies (use {@link createCookies} method instead if you are using SSR)
 * @param dependencies - array of watching cookie's names. Pass empty array if don't want to watch cookies changes.
 * @param options
 * @param options.doNotParse - don't try parse value as JSON
 * @param options.autoUpdateDependencies - automatically update watching dependencies
 * @param cookies - universal-cookie instance
 */
export declare function useCookies(
  dependencies?: string[] | null,
  {
    doNotParse,
    autoUpdateDependencies,
  }?: {
    doNotParse?: boolean | undefined
    autoUpdateDependencies?: boolean | undefined
  },
  cookies?: Cookie,
): {
  /**
   * Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
   */
  get: <T = any>(name: string, options?: CookieGetOptions | undefined) => T
  /**
   * Reactive get all cookies
   */
  getAll: <T = any>(options?: CookieGetOptions | undefined) => T
  set: (
    name: string,
    value: any,
    options?: CookieSetOptions | undefined,
  ) => void
  remove: (name: string, options?: CookieSetOptions | undefined) => void
  addChangeListener: (callback: CookieChangeListener) => void
  removeChangeListener: (callback: CookieChangeListener) => void
}