1.比如分类中有两个业务banner和category

则定义两个函数，以use开头

Category/composables/useBanner.js

Category/composables/useCategory.js

// 封装banner轮播图相关的业务代码

import { ref, onMounted } from 'vue'

import { getBannerAPI } from '@/apis/home'

export function useBanner () {

const bannerList = ref([])

const getBanner = async () => {

const res = await getBannerAPI({

distributionSite: '2'

})

console.log(res)

bannerList.value = res.result

}

onMounted(() => getBanner())

return {

bannerList

}

}

// 封装分类数据业务相关代码

import { onMounted, ref } from 'vue'

import { getCategoryAPI } from '@/apis/category'

import { useRoute } from 'vue-router'

import { 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) => {

// 存在问题：使用最新的路由参数请求最新的分类数据

getCategory(to.params.id)

})

return {

categoryData

}

}

2.页面引用

import { useBanner } from './composables/useBanner'

import { useCategory } from './composables/useCategory'

const { bannerList } = useBanner()

const { categoryData } = useCategory()