CondorAdmin

Appearance

Composables 使用指南 ​

Composables（组合式函数）是 Vue 3 Composition API 的核心概念，CondorAdmin 提供了一套实用的 Composables 简化开发。

内置 Composables ​

useBoolean ​

管理布尔状态。

typescript
import { useBoolean } from '@sa/hooks';

const [visible, { setTrue, setFalse, toggle }] = useBoolean(false);

// 使用
setTrue();   // visible.value = true
setFalse();  // visible.value = false
toggle();    // visible.value = !visible.value

useLoading ​

管理加载状态。

typescript
import { useLoading } from '@sa/hooks';

const { loading, startLoading, endLoading } = useLoading();

async function fetchData() {
  startLoading();
  try {
    await api.getData();
  } finally {
    endLoading();
  }
}

useCountDown ​

倒计时。

typescript
import { useCountDown } from '@sa/hooks';

const { count, start, stop, reset } = useCountDown(60);

start(() => {
  console.log('倒计时结束');
});

useRouterPush ​

路由跳转。

typescript
import { useRouterPush } from '@/hooks/common/router';

const { routerPush, routerBack } = useRouterPush();

// 跳转
routerPush('/system/admin');

// 后退
routerBack();

自定义 Composables ​

创建 Composable ​

typescript
// src/composables/useTable.ts
import { ref } from 'vue';

export function useTable() {
  const data = ref([]);
  const loading = ref(false);
  
  async function fetchData() {
    loading.value = true;
    try {
      const res = await api.getList();
      data.value = res.data;
    } finally {
      loading.value = false;
    }
  }
  
  return {
    data,
    loading,
    fetchData
  };
}

使用 ​

vue
<script setup lang="ts">
import { useTable } from '@/composables/useTable';

const { data, loading, fetchData } = useTable();

onMounted(() => {
  fetchData();
});
</script>

最佳实践 ​

  1. use 前缀：所有 Composable 以 use 开头
  2. 返回响应式数据：返回 ref 或 reactive
  3. 清理副作用：在 onUnmounted 中清理

相关文档 ​