基于业务逻辑拆分函数

基于业务逻辑拆分函数

引用

CSDN

1.

https://blog.csdn.net/weixin_57334661/article/details/138618869

在现代前端开发中，合理地拆分和组织代码逻辑对于提高代码的可维护性和复用性至关重要。本文将介绍如何基于业务逻辑拆分函数，通过Vue.js的组合式API（Composition API）来实现组件逻辑的封装和复用。

核心思想

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

<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>