useCookies

类别

@Integrations

导出体积

534 B

依赖包

@vueuse/integrations

上次更改

2 months ago

对 universal-cookie 的包装。

TIP

在 Nuxt 3 中使用时，这些函数不会自动导入，而是使用 Nuxt 内置的 useCookie()。如果要使用 VueUse 中的函数，请显式导入。

Available in the @vueuse/integrations add-on.

安装

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 (布尔值 = false)：无论如何都不将 cookie 转换为对象。作为传递给 get/getAll 方法的默认值。
autoUpdateDependencies (布尔值 = false)：自动添加传递给 get 方法的 cookie 名称。如果为 true，则无需关心提供的 dependencies。

`cookies` (可选)

允许你提供一个 universal-cookie 实例 (默认情况下创建一个新实例)

关于可用方法的信息，请参阅 universal-cookie api 文档

`createCookies([req])`

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

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

类型声明

显示类型声明

/**
 * 创建一个新的 {@link useCookies} 函数
 * @param req - 传入的 http 请求（用于 SSR）
 * @see https://github.com/reactivestack/cookies/tree/master/packages/universal-cookie universal-cookie
 * @description 使用请求创建一个 universal-cookie 实例（默认是 window.document.cookie），并返回带有提供的 universal-cookie 实例的 {@link useCookies} 函数
 */
export declare function createCookies
(req
?: IncomingMessage
): (
  dependencies
?: string[] | null,
  {
    doNotParse
,
    autoUpdateDependencies
,
  }?: {
    doNotParse
?: boolean | undefined
    autoUpdateDependencies
?: boolean | undefined
  },
) => {
  /**
   * 通过名称响应式地获取 cookie。如果 **autoUpdateDependencies = true**，则会更新监视依赖项
   */
  get
: <T
 = any>(name
: string, options
?: CookieGetOptions
 | undefined) => T

  /**
   * 响应式地获取所有 cookie
   */
  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
}
/**
 * 用于处理 cookie 的响应式方法（如果使用 SSR，请改用 {@link createCookies} 方法）
 * @param dependencies - 监视 cookie 名称的数组。如果不想监视 cookie 更改，请传入空数组。
 * @param options
 * @param options.doNotParse - 不尝试解析值为 JSON
 * @param options.autoUpdateDependencies - 自动更新监视依赖项
 * @param cookies - universal-cookie 实例
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function useCookies
(
  dependencies
?: string[] | null,
  {
    doNotParse
,
    autoUpdateDependencies
,
  }?: {
    doNotParse
?: boolean | undefined
    autoUpdateDependencies
?: boolean | undefined
  },
  cookies
?: Cookie
,
): {
  /**
   * 通过名称响应式地获取 cookie。如果 **autoUpdateDependencies = true**，则会更新监视依赖项
   */
  get
: <T
 = any>(name
: string, options
?: CookieGetOptions
 | undefined) => T

  /**
   * 响应式地获取所有 cookie
   */
  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
}