export function getTenner(type=30){
    return axios.get(`${baseUrl}/personalized?limit=${type}`)
}

建立生命週期函式，分別拿到資料和設定前端頁面展示

 onMounted(async () => {
      //view與model繫結成功之後生命週期函式
      let res = await getTenner();
    //   console.log(res.data.result);
      musics.musicList = res.data.result;
    });
    onUpdated(() 
 
=> {
      //view或者model發生改變後觸發的生命週期函式
      var swiper = new Swiper("#musicSwiper", {
        slidesPerView: 3, //每一屏顯示幾個內容
        spaceBetween: 10, //每個滑塊之間的間距
      });
    });

後面不要忘記return

頁面展示

 <router-link
              :to="{ path: '/listview', query: { id: item.id } }"
              class="swiper-slide"
              v
 
-for="(item, i) in musics.musicList"
              :key="i"
            >
              <img :src="item.picUrl" alt="" />
              <div class="name">{{ item.name }}</div>
              <div class="count">
             
                <span>{{ changeValue(item.playCount) }}</span>
              </div>
            </router-link>

這裡我沒有寫向量圖，router-link為後面點選進入播放列表做準備