useCookies

分类

@Integrations

导出大小

525 B

包

@vueuse/integrations

最后更改

3 周前

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 访问和修改 cookies。

默认情况下，您应该在 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 请求对象

类型声明

显示类型声明

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
}