useCookies

安装

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（布尔值 = 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 请求对象

类型声明

显示类型声明

typescript

/**
 * 创建一个新的 {@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 实例
 */
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
}