use 方法

useAppConfig

• 使用方法

const appConfig = useAppConfig();

console.log(appConfig);

useError

• 使用方法

const error = useError();

• Nuxt 错误具有以下错误

interface {
  // HTTP响应状态码
  statusCode: number
  // HTTP响应状态消息
  statusMessage: string
  // 错误消息
  message: string
}

useCookie

useCookie 是一个适用于服务器端渲染（SSR）的组合函数，用于读取和写入 cookie。

使用

const cookie = useCookie(name, options)

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

示例化

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

<script setup lang="ts">
  const counter = useCookie("counter");

  counter.value = counter.value || Math.round(Math.random() * 1000);
</script>

<template>
  <div>
    <h1>计数器: {{ counter || '-' }}</h1>
    <button @click="counter = null">重置</button>
    <button @click="counter--">减少</button>
    <button @click="counter++">增加</button>
  </div>
</template>

选项

• maxAge / expires 使用这些选项来设置 cookie 的过期时间。

• maxAge：

指定一个 number（以秒为单位）作为 Max-Age Set-Cookie 属性的值。 给定的数字将被四舍五入为整数。默认情况下，不设置最大年龄。

• expires：

指定一个 Date 对象作为 Expires Set-Cookie 属性的值。 默认情况下，不设置过期时间。大多数客户端将把它视为“非持久 cookie”，并在条件（比如退出 Web 浏览器应用程序）下删除它。

• httpOnly

指定一个 boolean 值作为 HttpOnly Set-Cookie 属性的值。如果为真，则设置 HttpOnly 属性；否则不设置。默认情况下，不设置 HttpOnly 属性。

• domain

指定一个值作为 Domain Set-Cookie 属性的值。默认情况下，不设置域，大多数客户端将仅将 cookie 应用于当前域。

• path

指定一个值作为 Path Set-Cookie 属性的值。默认情况下，路径被认为是"默认路径"。

• watch

指定一个 boolean 或 string 值，用于监听 cookie 的 ref 数据。

true - 将监听 cookie 的 ref 数据变化以及其嵌套属性（默认）。 shallow - 只监听 cookie 的 ref 数据的顶级属性变化。 false - 不监听 cookie 的 ref 数据变化。

示例一

<script setup lang="ts">
  const user = useCookie("userInfo", {
    default: () => ({ score: -1 }),
    watch: false,
  });

  if (user.value && user.value !== null) {
    user.value.score++; // userInfo cookie不会随此更改而更新
  }
</script>

<template>
  <div>用户分数: {{ user?.score }}</div>
</template>

示例二

<script setup lang="ts">
  const list = useCookie("list", {
    default: () => [],
    watch: "shallow",
  });

  function add() {
    list.value?.push(Math.round(Math.random() * 1000));
    // list cookie不会随此更改而更新
  }

  function save() {
    if (list.value && list.value !== null) {
      list.value = [...list.value];
      // list cookie随此更改而更新
    }
  }
</script>

<template>
  <div>
    <h1>列表</h1>
    <pre>{{ list }}</pre>
    <button @click="add">添加</button>
    <button @click="save">保存</button>
  </div>
</template>