基于业务逻辑拆分函数

一、核心思想

1、逻辑拆分过程是一个拆分再组合的过程

useBanner业务逻辑、useCategory业务逻辑

2、函数use开头，内部封装逻辑，return  组件需要用到的数据和方法给组件消费

二、具体怎么做

1. 按照业务声明以 `use` 打头 的逻辑函数

2. 把 独立的业务逻辑 封装到各个函数内部

3. 函数内部把组件中需要用到的数据或者方法 return出去

4. 在 组件中调用函数 把数据或者方法组合回来使用

三、代码例子实现

useBanner.js

// 封装轮播图业务数据相关代码
import { ref, onMounted } from "vue";
import { getBannerAPI } from "@/apis/home";

// 获取banner数据
export function useBanner() {
  const bannerList = ref([]);
  const getBanner = async () => {
    const res = await getBannerAPI({
      distributionSite: "2",
    });
    bannerList.value = res.result;
  };
    onMounted(() => {
      getBanner();
    });
    return {
      bannerList
    }
}

useCategory.js

// 封装分类业务数据相关代码
import { ref, onMounted } from "vue";
import { getCategoryAPI } from "@/apis/category";
import { useRoute, onBeforeRouteUpdate } from "vue-router";

export function useCategory() {
    // 获取分类数据
    const categoryData = ref({});
    const route = useRoute();
    const getCategory = async (id = route.params.id) => {
      const res = await getCategoryAPI(id);
      categoryData.value = res.result;
    };
    // 页面挂载
    onMounted(() => {
      getCategory();
    });

    // 目标：路由参数变化的时候，可以把分类数据接口重新发送
    onBeforeRouteUpdate((to) => {
      console.log("路由变化了");
      // 存在问题：使用最新的路由参数请求最新的分类数据
      console.log(to);
      getCategory(to.params.id);
    });
    return {
      categoryData
    }
}

四、需要用到数据的组件

Category/index.vue    需要用到  bannerList   和   categoryData    用结构赋值即可

<script setup>
import GoodsItem from "../Home/components/GoodsItem.vue";
import { useBanner } from "./composables/useBanner";
import { useCategory } from "./composables/useCategory";

// 获取分类数据
const { categoryData } = useCategory();

// 获取banner数据
const { bannerList } = useBanner();
</script>

<template>
  <div class="top-category">
    <div class="container m-top-20">
      <!-- 面包屑 -->
      <div class="bread-container">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 轮播图 -->
      <div class="home-banner">
        <el-carousel height="500px">
          <el-carousel-item v-for="item in bannerList" :key="item.id">
            <img :src="item.imgUrl" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="sub-list">
        <h3>全部分类</h3>
        <ul>
          <li v-for="i in categoryData.children" :key="i.id">
            <RouterLink to="/">
              <img :src="i.picture" />
              <p>{{ i.name }}</p>
            </RouterLink>
          </li>
        </ul>
      </div>
      <div
        class="ref-goods"
        v-for="item in categoryData.children"
        :key="item.id"
      >
        <div class="head">
          <h3>- {{ item.name }}-</h3>
        </div>
        <div class="body">
          <GoodsItem v-for="good in item.goods" :goods="good" :key="good.id" />
        </div>
      </div>
    </div>
  </div>
</template>