Question

useCookie 是一个 SSR 友好的可组合对象，用于读取和写入 cookie。

useCookie

在您的页面、组件和插件中，您可以使用useCookie，这是一个 SSR 友好的可组合项，用于读取和写入 cookie。

js

const cookie = useCookie(name, options)

useCookie 仅在 setup 或 Lifecycle Hooks 期间有效。

useCookie ref 会自动将 cookie 值序列化和反序列化为 JSON。

示例

下面的示例创建了一个名为 counter 的 cookie。 如果 cookie 不存在，它最初被设置为一个随机值。 每当我们更新 counter 变量时，cookie 都会相应更新。

vue

<template>
  <div>
    <h1>Counter: {{ counter || '-' }}</h1>
    <button @click="counter = null">reset</button>
    <button @click="counter--">-</button>
    <button @click="counter++">+</button>
  </div>
</template>

<script setup>
const counter = useCookie('counter')
counter.value = counter.value || Math.round(Math.random() * 1000)
</script>

案例演示：在StackBlitz编辑

选项

Cookie 可组合项接受多个选项，让您可以修改 cookie 的行为。

大多数选项将直接传递给 cookie 包。

maxAge / expires

您可以使用 h3 包中的 getCookie 和 setCookie 在服务器 API 路由中设置 cookie。

示例:

js

export default defineEventHandler(event => {
  // 读取计数器 cookie
  let counter = getCookie(event, 'counter') || 0

  // 将计数器 cookie 增加 1
  setCookie(event, 'counter', ++counter)

  // 发送 JSON 响应
  return { counter }
})