vue3 hooks的简单使用 组合式函数

想当于vue2的mixins，我们可以使用hooks代替mixins。
官方文档 组合式函数
hooks 特点

• vue3 中的 hooks 函数相当于 vue2 里面的 mixin 混入，不同在于 hooks 是函数。
• vue3 中的 hooks 函数可以提高代码的复用性，能够在不同的组件当中都利用 hooks 函数。
• hooks 函数可以与 mixin 连用，但是不建议。

把一些公共的代码封装到一个文件中，减少代码的重复性；

写法1:

import { reactive } from 'vue'

export default function () {  // 导出一个默认方法

  // 创建一个对象，保存宽度和高度值
  const screen = reactive({
    width: 0,
    height: 0
  })

  // 创建一个方法，获取可视化界面的宽度和高度值
  const getWH = () => {
    ...
  }

  return { screen, getWH }  // 方法返回宽高值
}

使用

  // 导入 hooks 
  import screenWH from '../hooks/useScreenWh.ts'

  // 因为 screenWH 是一个导出的方法，所以需要调用一下子，然后顺便解构一下就可以在模板使用了。
  let { screen, getWH } = screenWH()

写法2: 【推荐】

export const useHandleDelete = () => {
  const { emit } = getCurrentInstance()!;

  const handleDelete = (url: string, method: string = 'delete', params?: any) => {
    return new Promise((resolve, reject) => {
      ElMessageBox.confirm('是否确认删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        showClose: false
      })
        .then(async () => {
          await Pepper[method](url, params);
          resolve(
            ElMessage.success({
              message: '删除成功!'
            })
          );
          emit('handleUpdate');
        })
        .catch(() => {
          reject(
            ElMessage.info({
              message: '已取消删除'
            })
          );
        });
    });
  };

  return handleDelete;
};

使用

import { useHandleDelete } from '@/hooks/useHandleDelete';


const handleDelete = useHandleDelete();