useToggle

用于管理布尔值状态的 hook，提供切换、设置为 true 和设置为 false 的方法。

基础用法

最简单的用法是创建一个可切换的布尔状态。

当前状态: 关闭

显示代码

设置初始值

可以通过传入参数来设置初始值。

模态框状态: 显示

显示代码

实际应用场景

控制组件显示/隐藏

显示代码

加载状态管理

显示代码

API

参数

参数名	类型	默认值	说明
initialValue	boolean	false	初始状态

返回值

返回一个数组，包含以下元素：

索引	类型	说明
0	ComputedRef<boolean>	当前状态的只读响应式引用
1	() => void	切换状态的函数
2	() => void	设置状态为 true
3	() => void	设置状态为 false

类型定义

/**
 * 切换状态的函数类型
 * @description 切换当前布尔状态值
 */
export type ToggleFunction = () => void;

/**
 * 设置状态为 true 的函数类型
 * @description 将状态设置为 true
 */
export type SetTrueFunction = () => void;

/**
 * 设置状态为 false 的函数类型
 * @description 将状态设置为 false
 */
export type SetFalseFunction = () => void;

/**
 * useToggle 钩子函数的返回值类型
 * @description 返回一个包含状态和操作函数的数组，可以通过数组解构使用
 * @example
 * ```typescript
 * const [isVisible, toggle, setTrue, setFalse] = useToggle(false);
 * ```
 */
export type UseToggleReturn = [
  /** 当前布尔状态值的只读响应式引用 */
  ComputedRef<boolean>,
  /** 切换状态的函数 */
  ToggleFunction,
  /** 将状态设置为 true 的函数 */
  SetTrueFunction,
  /** 将状态设置为 false 的函数 */
  SetFalseFunction,
];

/**
 * 切换布尔值的钩子函数
 * @param initialValue 初始值，默认为false
 * @returns 返回数组 [state, toggle, setTrue, setFalse]
 * @example
 * ```typescript
 * // 基础用法
 * const [isVisible, toggle] = useToggle(false);
 *
 * // 完整用法
 * const [isOpen, toggleOpen, setOpen, setClosed] = useToggle(true);
 * ```
 */
export function useToggle(initialValue?: boolean): UseToggleReturn;

注意事项

1. state 是一个响应式引用，在模板中可以直接使用，在 JavaScript 中需要通过 .value 访问
2. toggle、setTrue、setFalse 函数可以安全地传递给事件处理器
3. 该 hook 是纯函数，不会产生副作用
4. 支持在同一个组件中多次使用，每次调用都会创建独立的状态