关于boolean组合式函数封装【TS、Vue3】

问题描述

在使用modal框和其他很多情况需要对boolean类型的值进行修改时，代码都比较简单，冗余，所以我希望能封装成一个hook函数

封装代码

import {
    
     ref } from 'vue';

/**
 * boolean组合式函数
 * @param initValue 初始值
 */
export default function useBoolean(initValue = false) {
    
    
  const bool = ref(initValue);

  function setBool(value: boolean) {
    
    
    bool.value = value;
  }
  function setTrue() {
    
    
    setBool(true);
  }
  function setFalse() {
    
    
    setBool(false);
  }
  function toggle() {
    
    
    setBool(!bool.value);
  }

  return {
    
    
    bool,
    setBool,
    setTrue,
    setFalse,
    toggle
  };
}

父组件调用

<template>

      <n-button @click="setTrue"> 开始干活 </n-button>

    <finish-modal :show="show" @close-modal="setFalse" @postive-click="setFalse" />
  </n-card>
</template>

<script setup lang="ts">
import {
      
       useBoolean } from '@/hooks';
import {
      
       FinishModal } from './components';


const {
      
       bool: show, setTrue, setFalse } = useBoolean(false);
</script>

这样的代码就十分精简了，需要打开modal框时调用setTrue即可