v3hooks --useBoolean

含虞

已于 2023-08-10 21:02:07 修改

阅读量161

点赞数

文章标签： javascript 前端 vue.js

于 2023-08-08 20:03:04 首次发布

本文链接：https://blog.csdn.net/m0_64738079/article/details/132174404

版权

文章介绍了如何使用Vue中的useBooleanHook优雅地管理布尔值状态，提供toggle、setTrue和setFalse方法，可通过默认值或自定义值控制状态。示例展示了如何在组件中应用这个Hook。

摘要由CSDN通过智能技术生成

import { Ref } from 'vue';
import useToggle from '../useToggle';

// 默认值
const defaultValue = false;

interface Actions{
    toggle: ()=> void;
    setTrue: ()=> void;
    setFalse: ()=> void;
}

function useBoolean(
    value?: boolean
): [Ref<boolean>,Actions]
/**
 * 
 * @param defaultValue
 * @returns 
 */
function useBoolean (value?: boolean){

    value = value || defaultValue;

    const [ state, [ toggle ]] = useToggle(value,!value);
    
    const setTrue = () => toggle(true);
    const setFalse = () => toggle(false);

    const actions: Actions = { toggle, setTrue, setFalse }
    return [state, actions ]
}

export default useBoolean

useBoolean

优雅的管理 boolean 值的 Hook。

使用

<template>
    <div>
      <p>{{ useBooleanState }}</p>
      <button @click="useBooleanToggle">toggle</button>
      <button @click="setTrue">setTrue</button>
      <button @click="setFalse">setFalse</button>
    </div>
</template>

<script lang="ts">

import { ref } from 'vue';
import { useBoolean } from 'v3hooks';


export default {
  
  

  setup() {
    //useToggle 测试
    const [ useBooleanState,{ toggle: useBooleanToggle, setTrue, setFalse}] = useBoolean();


    return {
      useBooleanState,
      useBooleanToggle,
      setTrue,
      setFalse
    }
  }
}
</script>

useBoolean默认切换布尔值状态，也可以接收一个参数作为新的值。

Api

Params

参数	说明	类型	默认值
defaultValue	可选项，传入默认的状态值	Ref	false

Result

参数	说明	类型
state	状态值	-
actions	操作集合	Actions

Actions

参数	说明	类型
toggle	触发状态更改的函数,可以接受一个可选参数修改状态值	(value?: boolean) => void
setTrue	设置状态值为 true	() => void
setFalse	设置状态值为 false	() => void