useCookies

分类

@Integrations

导出大小

534 B

包

@vueuse/integrations

上次更改

3 个月前

universal-cookie 的封装。

提示

在 Nuxt 3 中使用时，此函数将不会被自动导入，以支持 Nuxt 内置的 useCookie()。如果您想使用 VueUse 的函数，请显式导入。

可在 @vueuse/integrations 插件中使用。

安装

bash

npm i universal-cookie@^7

用法

常见用法

vue

<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 访问和修改 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])`

使用请求（默认为 window.document.cookie）创建一个 universal-cookie 实例，并返回带有提供的 universal-cookie 实例的 useCookies 函数。

req (object)：Node 的 http.IncomingMessage 请求对象

类型声明

显示类型声明

/**
 * 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
 *
 * @__NO_SIDE_EFFECTS__
 */
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
}