hook写法

vue文件
<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="home-con">
    <Banner></Banner>
    <el-card class="hot-con con">
      <div class="title">
        <h3>热门推荐</h3>
        {{ hotsug() }}
        <span class="t-name" :class="{ active: hindex === i }" v-for="(item, i) in tags" :key="i"
          @click="changeT(item.name, i)">{{ item.name }}</span>
      </div>
      <div class="playlists">
        <play-list :playlist="hlist" :loading="hloading"></play-list>
      </div>
    </el-card>
    <el-card class="n-dvd con">
      <div class="title">
        <h3>新碟上架</h3>
        <span class="t-name" :class="{ active: dindex === i }" v-for="(item, i) in typelist.ALBUM_AREA" :key="item.code"
          @click="changeA(item.code, i)">
          {{ item.name }}</span>
      </div>
      <div class="albumlist">
        <AlbumList :albumlist="dvdlist" :loading="dloading" :num="dcount"> </AlbumList>
      </div>
    </el-card>

    <div class="top_list">
      <rank-list />
    </div>

    <el-card class="n-dvd con">
      <div class="title">
        <h3>最新MV</h3>
        <span class="t-name" :class="{ active: mindex === i }" v-for="(item, i) in typelist.MV_AREA" :key="i"
          @click="changeM(i, item)">
          {{ item }}</span>
      </div>
      <div class="mvlist">
        <MVList :mvlist="mvlist" :loading="mloading" :num="mnum"> </MVList>
      </div>
    </el-card>

    <div class="r-s">
      <!-- 热门歌手和热门电台 -->
      <HotRadio class="r"></HotRadio>
      <HotSinger clss="s"></HotSinger>
    </div>
  </div>
</template>

<script setup lang="ts">
import { watch, ref,watchEffect } from 'vue'
import AlbumList from '@/components/list/AlbumList.vue'
import MVList from '@/components/list/MVList.vue'
import HotRadio from './HotRadio.vue'
import HotSinger from './HotSinger.vue'

import Banner from './Banner.vue'
import RankList from './RankList.vue'

import typelist from '@/typelist/index'
import hotsug from '@/hook/hotsug'
import newdvd from '@/hook/newdvd'
import newMV from '@/hook/newMV'

const { index: hindex, tags, list: hlist, changeT, loading: hloading } = hotsug()

const { dvdlist, loading: dloading, index: dindex, changeA, dcount } = newdvd()

const { mvlist, mindex, changeM, mloading, mnum } = newMV()

const state = ref({
  user: {
    name: 'Alice',
    details: {
      age: 25,
      location: 'Wonderland'
    }
  }
});




// 注：第一个参数：监听谁，第二个参数：回调函数，第三个参数：配置对象
 
watch(() => state, (newVal, oldVal) => {
  // alert("!22")
  console.log('111', hotsug().list);
}, { immediate: true, deep: true })
 
// watchEffect(()=>{
//   let m = state.name
//   console.log(state.name ,'变化了');
// })
</script>

ts文件
import { onMounted, ref } from 'vue'
import { hotlist, playlist } from '@/api/search'
import { ElMessage } from 'element-plus'

export default function hotsug() {
  const tags = ref([])
  const list = ref([])
  const index = ref(0)
  const params = ref({ limit: 6, offset: 0, cat: '' })
  const count = 6
  const loading = ref(true)

  //获取前六热搜标签
  const getHotTags = async () => {
    const res: any = await hotlist()
    if (res.code !== 200) {
      ElMessage.error('请求失败！')
      return Promise.reject(new Error('请求失败'))
    }

    res.tags.unshift({ name: '为你推荐' })
    tags.value = res.tags.splice(0, 6)
  }

  //获取热搜相关歌曲
  const getHotplaylist = async () => {
    const res: any = await playlist(params.value)

    if (res.code !== 200) {
      ElMessage('请求失败！')
    }
    list.value = res.playlists
    loading.value = false
  }

  onMounted(() => {
    getHotTags()
    getHotplaylist()
  })

  //切换关键词
  const changeT = (name: string, i: number) => {
    index.value = i
    params.value.cat = i !== 0 ? name : ''
    getHotplaylist()
  }

  return {
    tags,
    index,
    list,
    loading,
    changeT
  }
}