Skip to content

useCookies

Category
Export Size
691 B
Package
@vueuse/integrations
Last Changed
last year

universal-cookie 的包装。

TIP

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

Available in the @vueuse/integrations add-on.

安装

bash
npm i universal-cookie@^6

用法

常规用法

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

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() 中使用它,但此函数也可以在其他任何地方使用。

ts
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 函数

类型声明

显示类型声明
typescript
/// <reference types="node" />
/**
 * 创建一个新的 {@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_1 = any>(options?: CookieGetOptions | undefined) => T_1
  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 实例
 */
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_1 = any>(options?: CookieGetOptions | undefined) => T_1
  set: (
    name: string,
    value: any,
    options?: CookieSetOptions | undefined,
  ) => void
  remove: (name: string, options?: CookieSetOptions | undefined) => void
  addChangeListener: (callback: CookieChangeListener) => void
  removeChangeListener: (callback: CookieChangeListener) => void
}

Source

SourceDocs

贡献者

Anthony Fu
丶远方
Doctorwu
Alex Kozack
Konstantin Barabanov

变更日志

No recent changes

Released under the MIT License.

Build faster with AI
New Masterclass to help you leverage AI in your Vue workflow.
Get Early Access