Vue 3 的组合式 API-hooks

Vue 3 的组合式 API

组合式 API 是 Vue 3 的核心特性之一，它允许开发者将组件的逻辑拆分为可复用的函数。组合式 API 的主要特点是

• 逻辑复用：将逻辑提取到独立的函数中，方便在多个组件中复用。
• 组织清晰：将相关的逻辑分组，而不是将逻辑分散到 data、methods、computed 等选项中。
• 更接近函数式编程：通过函数组合的方式组织代码。

在 Vue 3 中，自定义 Hooks 是通过组合式 API 的 ref、reactive、watch、computed 等函数实现的

• 基本的自定义 Hook

// useCounter.ts
import { ref } from 'vue';
export function useCounter(initialValue = 0) {
  const count = ref(initialValue);

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    count.value--;
  };

  return { count, increment, decrement };
}

在组件中使用：

• 路由跳转

// useNavigation.ts
import { RouteLocationRaw } from 'vue-router'
import { useRouter } from 'vue-router'

export function useNavigation() {
  const router = useRouter()

  // 基本跳转
  const navigateTo = (to: RouteLocationRaw) => {
    return router.push(to)
  }

  // 替换当前路由
  const replaceRoute = (to: RouteLocationRaw) => {
    return router.replace(to)
  }

  // 返回上一页
  const goBack = (delta = -1) => {
    router.go(delta)
  }

  // 前进
  const goForward = () => {
    router.go(1)
  }

  return {
    navigateTo,
    replaceRoute,
    goBack,
    goForward,
    router
  }
}

在组件中使用示例

• 消息提示hooks

/useMessage.ts
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { useI18n } from './useI18n'
export const useMessage = () => {
  const { t } = useI18n()
  return {
    // 消息提示
    info(content: string) {
      ElMessage.info(content)
    },
    // 错误消息
    error(content: string) {
      ElMessage.error(content)
    },
    // 成功消息
    success(content: string) {
      ElMessage.success(content)
    },
    // 警告消息
    warning(content: string) {
      ElMessage.warning(content)
    },
    // 弹出提示
    alert(content: string) {
      ElMessageBox.alert(content, t('common.confirmTitle'))
    },
    // 错误提示
    alertError(content: string) {
      ElMessageBox.alert(content, t('common.confirmTitle'), { type: 'error' })
    },
    // 成功提示
    alertSuccess(content: string) {
      ElMessageBox.alert(content, t('common.confirmTitle'), { type: 'success' })
    },
    // 警告提示
    alertWarning(content: string) {
      ElMessageBox.alert(content, t('common.confirmTitle'), { type: 'warning' })
    },
    // 通知提示
    notify(content: string) {
      ElNotification.info(content)
    },
    // 错误通知
    notifyError(content: string) {
      ElNotification.error(content)
    },
    // 成功通知
    notifySuccess(content: string) {
      ElNotification.success(content)
    },
    // 警告通知
    notifyWarning(content: string) {
      ElNotification.warning(content)
    },
    // 确认窗体
    confirm(content: string, tip?: string) {
      return ElMessageBox.confirm(content, tip ? tip : t('common.confirmTitle'), {
        confirmButtonText: t('common.ok'),
        cancelButtonText: t('common.cancel'),
        type: 'warning'
      })
    },
    // 删除窗体
    delConfirm(content?: string, tip?: string) {
      return ElMessageBox.confirm(
        content ? content : t('common.delMessage'),
        tip ? tip : t('common.confirmTitle'),
        {
          confirmButtonText: t('common.ok'),
          cancelButtonText: t('common.cancel'),
          type: 'warning'
        }
      )
    },
    // 导出窗体
    exportConfirm(content?: string, tip?: string) {
      return ElMessageBox.confirm(
        content ? content : t('common.exportMessage'),
        tip ? tip : t('common.confirmTitle'),
        {
          confirmButtonText: t('common.ok'),
          cancelButtonText: t('common.cancel'),
          type: 'warning'
        }
      )
    },
    // 提交内容
    prompt(content: string, tip: string) {
      return ElMessageBox.prompt(content, tip, {
        confirmButtonText: t('common.ok'),
        cancelButtonText: t('common.cancel'),
        type: 'warning'
      })
    }
  }
}