useCookies

类别

@集成

导出大小

435 B

包

@vueuse/integrations

最近修改

2 days ago

universal-cookie 的封装器。

🌐 Wrapper for universal-cookie.

TIP

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

Available in the @vueuse/integrations add-on.

安装

🌐 Install

npm i universal-cookie@^7

用法

🌐 Usage

常见用法

🌐 Common usage

<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>

选项

🌐 Options

使用 vuecomposer-api 访问和修改 cookie。

🌐 Access and modify cookies using vue composition-api.

默认情况下，你应该在 setup() 内使用它，但这个函数在其他地方也同样有效。

const {
  get,
  getAll,
  set,
  remove,
  addChangeListener,
  removeChangeListener
} = useCookies(['cookie-name'], {
  doNotParse: false,
  autoUpdateDependencies: false
})

dependencies（可选）

🌐 dependencies (optional)

允许你可选地指定组件依赖的或应触发重新渲染的 cookie 名称列表。如果未指定，它将在每次 cookie 变化时渲染。

🌐 Let you optionally specify a list of cookie names your component depend on or that should trigger a re-render. If unspecified, it will render on every cookie change.

options（可选）

🌐 options (optional)

• doNotParse（布尔值 = false）：无论如何都不要将 cookie 转换为对象。作为默认值传递给 get/getAll 方法。
• autoUpdateDependencies（布尔值 = false）：自动将提供的 cookie 名称添加到 get 方法中。如果为 true，则无需关心提供的 dependencies。

cookies（可选）

🌐 cookies (optional)

让你提供一个 universal-cookie 实例（默认情况下会创建一个新实例）

🌐 Let you provide a universal-cookie instance (creates a new instance by default)

关于 universal-cookie API 文档 中可用方法的信息

createCookies([req])

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

🌐 Create a universal-cookie instance using request (default is window.document.cookie) and returns useCookies function with provided universal-cookie instance

• req（对象）：Node 的 http.IncomingMessage 请求对象