Vue3 - 使用 逻辑函数 拆分业务

逻辑函数

• 基于逻辑函数拆分业务是指把 同一个组件 中 独立的业务代码 通过 函数 做 封装处理，提升代码的 可维护性；

实现步骤

• 在组件对应的文件夹下建立新的js文件：
• 1️⃣ 按照业务声明以 use 打头的逻辑函数；
• 2️⃣ 把 独立的业务逻辑 封装到各个函数内部；
• 3️⃣ 函数内部把组件中需要用到的 数据 或者 方法 return 出去；

  // TODO 封装分类数据业务相关的业务代码
  import { ref, onMounted } from 'vue';
  import { useRoute, onBeforeRouteUpdate } from 'vue-router';
  import { getCategoryListAPI } from "@/apis/category";
  
  export const useCategory = () => {
    const categoryList = ref([]);
    const categoryName = ref("");
    const route = useRoute();
  
    const getCategoryList = async (id = route.params.id) => {
      const {
        code,
        result: { children, name },
      } = await getCategoryListAPI({ id });
      if (code != 1) return (categoryList.value = []);
      categoryList.value = children;
      categoryName.value = name;
    };
    onMounted(() => getCategoryList());
  
    // TODO 解决路由缓存问题 - onBeforeRouteUpdate 性能方面更优，精细化控制
    onBeforeRouteUpdate((to) => {
      getCategoryList(to.params.id);
    });
  
    return {
      categoryList,
      categoryName
    }
  }
  

• 4️⃣ 在 组件中调用函数 把数据或者方法组合回来使用；

  import { useCategory } from './composables/useCategory';
  
  // TODO 获取二级分类列表
  const { categoryList, categoryName } = useCategory();
  

核心思想

• 逻辑拆分的过程是一个拆分再组合的过程；
• 函数use打头，内部封装逻辑，return组件需要用到的数据和方法；