Vue3常用的hooks方法3

验证码发送完之后的读秒

我们需要封装一个计时器 Hooks

import { ref } from 'vue'

export function useCountDown() {
  const countNum = ref(0)
  const countInterval = ref(null)

  const startCountDown = num => {
    countNum.value = Number(num)
    clearCountDown()
    countInterval.value = setInterval(() => {
      if (countNum.value === 0) {
        clearInterval(countInterval.value)
        countInterval.value = null
        return
      }
      countNum.value--
    }, 1000)
  }

  const clearCountDown = () => {
    if (countInterval.value) {
      clearInterval(countInterval.value)
    }
  }

  return { countNum, startCountDown, clearCountDown }
}

表格 Hooks 的封装

我之前在 vben-admin 这个项目中看到了useTable这个 Hooks，发现封装的很好，只需要传入一些必要参数，就可以获取一些表格所需要的渲染数据，源码比较多，感兴趣的可以去看看这个项目vue-vben-admin^[1]

type Props = Partial<DynamicProps<BasicTableProps>>;

type UseTableMethod = TableActionType & {
  getForm: () => FormActionType;
};

export function useTable(tableProps?: Props): [
  (instance: TableActionType, formInstance: UseTableMethod) => void,
  TableActionType & {
    getForm: () => FormActionType;
  },
] {
  const tableRef = ref<Nullable<TableActionType>>(null);
  const loadedRef = ref<Nullable<boolean>>(false);
  const formRef = ref<Nullable<UseTableMethod>>(null);

  let stopWatch: WatchStopHandle;

  function register(instance: TableActionType, formInstance: UseTableMethod) {
    // ...
  }

  function getTableInstance(): TableActionType {
    // ...
  }

  const methods: TableActionType & {
    getForm: () => FormActionType;
  } = {
    // ...
  };

  return [register, methods];
}

i18n 语言切换 Hooks

i18n也是现在很多项目都必不可少的功能，所以封装一个Hooks很有必要

import { i18n } from '/@/locales/setupI18n';

type I18nGlobalTranslation = {
  (key: string): string;
  (key: string, locale: string): string;
  (key: string, locale: string, list: unknown[]): string;
  (key: string, locale: string, named: Record<string, unknown>): string;
  (key: string, list: unknown[]): string;
  (key: string, named: Record<string, unknown>): string;
};

type I18nTranslationRestParameters = [string, any];

function getKey(namespace: string | undefined, key: string) {
  if (!namespace) {
    return key;
  }
  if (key.startsWith(namespace)) {
    return key;
  }
  return `${namespace}.${key}`;
}

export function useI18n(namespace?: string): {
  t: I18nGlobalTranslation;
} {
  const normalFn = {
    t: (key: string) => {
      return getKey(namespace, key);
    },
  };

  if (!i18n) {
    return normalFn;
  }

  const { t, ...methods } = i18n.global;

  const tFn: I18nGlobalTranslation = (key: string, ...arg: any[]) => {
    if (!key) return '';
    if (!key.includes('.') && !namespace) return key;
    return t(getKey(namespace, key), ...(arg as I18nTranslationRestParameters));
  };
  return {
    ...methods,
    t: tFn,
  };
}

// Why write this function？
// Mainly to configure the vscode i18nn ally plugin. This function is only used for routing and menus. Please use useI18n for other places

// 为什么要编写此函数？
// 主要用于配合vscode i18nn ally插件。此功能仅用于路由和菜单。请在其他地方使用useI18n
export const t = (key: string) => key;