useBoolean

一个简单的布尔值状态管理 Hook，提供布尔状态的设置和控制功能。相比 useToggle，useBoolean 更专注于状态设置而非切换操作。

基础用法

🔄 加载状态管理

✅ 加载完成

当前状态: false

显示代码

表单验证示例

📝 表单验证

用户名:

邮箱:

验证状态:

用户名错误: false
邮箱错误: false
表单有效:

显示代码

API 参考

参数

参数	类型	默认值	说明
initialValue	boolean	false	初始布尔值

返回值

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

const [state, setValue, setTrue, setFalse] = useBoolean(initialValue);

索引	名称	类型	说明
0	state	ComputedRef<boolean>	只读的响应式布尔状态
1	setValue	(value: boolean) => void	设置布尔值的函数
2	setTrue	() => void	设置为 true 的函数
3	setFalse	() => void	设置为 false 的函数

类型定义

export type SetValueFunction = (value: boolean) => void;
export type SetTrueFunction = () => void;
export type SetFalseFunction = () => void;

export type UseBooleanReturn = [ComputedRef<boolean>, SetValueFunction, SetTrueFunction, SetFalseFunction];

使用场景

1. 加载状态 - 控制加载、提交等状态
2. 表单验证 - 管理表单字段的错误状态
3. UI 控制 - 控制组件的显示/隐藏状态
4. 权限控制 - 管理用户权限相关的布尔状态

与 useToggle 的区别

特性	useBoolean	useToggle
主要用途	状态设置	状态切换
切换函数	❌	✅
设置函数	✅	✅
使用场景	加载状态、验证错误	开关、显示隐藏

注意事项

1. 返回的 state 是只读的计算属性，只能通过提供的函数修改
2. setValue 函数接受布尔值参数，可以直接设置状态
3. setTrue 和 setFalse 是便捷函数，等同于 setValue(true) 和 setValue(false)
4. 所有状态变化都是响应式的，会自动触发视图更新