几个实用的 Vue3 组合式 API 封装

在 Vue3 中，组合式 API 为开发者提供了更灵活和可维护的方式来组织和复用逻辑。以下将介绍几个实用的 Vue3 组合式 API 封装示例，帮助您提升开发效率。

首先是数据获取与处理的封装。通过创建一个 useDataFetch 函数，我们可以将数据获取的逻辑集中起来。它可以处理异步请求、错误处理以及数据的初始状态设置。

import { ref, onMounted } from 'vue';

function useDataFetch(url) {
  const data = ref(null);
  const error = ref(null);

  onMounted(() => {
    fetch(url)
    .then(response => response.json())
    .then(result => {
       data.value = result;
     })
    .catch(err => {
       error.value = err;
     });
  });

  return { data, error };
}

其次是表单验证的封装。useFormValidation 函数可以管理表单字段的验证规则和状态。

import { ref } from 'vue';

function useFormValidation(rules) {
  const formValues = ref({});
  const errors = ref({});

  const validate = () => {
    let valid = true;
    for (const field in rules) {
      const value = formValues.value[field];
      const rule = rules[field];

      if (!rule(value)) {
        errors.value[field] = rule.message;
        valid = false;
      } else {
        errors.value[field] = '';
      }
    }
    return valid;
  };

  return { formValues, errors, validate };
}

另外，状态管理的封装也非常有用。例如，创建一个 useCounter 函数来管理计数器的状态和操作。

import { ref } from 'vue';

function useCounter(initialValue = 0) {
  const count = ref(initialValue);

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

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

  return { count, increment, decrement };
}

通过这些实用的 Vue3 组合式 API 封装，我们能够使代码更加模块化、可复用和易于维护。它们有助于分离关注点，提高代码的可读性和可测试性，让我们在开发 Vue3 应用时更加高效和愉快。

无论是小型项目还是大型应用，合理运用组合式 API 的封装能够为我们的开发带来极大的便利，让我们能够更专注于业务逻辑的实现和用户体验的优化。