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

在 Vue3 中，组合式 API 为开发者提供了更加灵活和高效的方式来组织和复用组件逻辑。下面将介绍几个实用的组合式 API 的封装方法，帮助您提升开发效率和代码质量。

首先是 useFetchData 组合式函数，用于处理数据的获取。通过使用 async/await 和 fetch 来获取远程数据，并进行错误处理和加载状态的管理。

import { ref, reactive } from 'vue';

export function useFetchData(url) {
  const data = ref(null);
  const loading = ref(true);
  const error = ref(null);

  async function fetchData() {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP 错误! 状态: ${response.status}`);
      }
      data.value = await response.json();
    } catch (err) {
      error.value = err;
    } finally {
      loading.value = false;
    }
  }

  return { data, loading, error, fetchData };
}

接下来是 useFormValidation 组合式函数，用于表单验证。

import { ref } from 'vue';

export function useFormValidation(rules) {
  const formErrors = ref({});

  function validate(formData) {
    formErrors.value = {};
    for (const key in rules) {
      const rule = rules[key];
      if (!rule(formData[key])) {
        formErrors.value[key] = `输入不符合规则: ${rule.message}`;
      }
    }
    return Object.keys(formErrors.value).length === 0;
  }

  return { formErrors, validate };
}

还有 useLocalStorage 组合式函数，用于方便地与本地存储进行交互。

import { ref } from 'vue';

export function useLocalStorage(key, initialValue) {
  const value = ref(localStorage.getItem(key) || initialValue);

  function saveValue(newValue) {
    localStorage.setItem(key, newValue);
    value.value = newValue;
  }

  return { value, saveValue };
}

通过对这些实用的组合式 API 进行封装，我们可以在不同的组件中轻松复用这些逻辑，减少重复代码，使代码结构更加清晰和易于维护。

合理地封装组合式 API 能够极大地提升 Vue3 应用的开发效率和可维护性，让您能够更加专注于业务逻辑的实现。在实际开发中，根据项目需求不断探索和封装更多实用的组合式函数，将为您的开发工作带来更多便利。