看到這，相信你們都能大概理解了，我就簡寫一下

之前寫的忘了引入元件和方法了

import listViewTop from '@/components/listViewTop.vue'
import playList from '@/components/playList.vue'
import { getPlaylistDetail } from "@/api/index.js";
import { onMounted, reactive } from "@vue/runtime-core";
import { useRoute } from "vue-router";//呼叫一個函式
import store from '@/store/index.js'

一、建介面

二、定義生命週期函式，獲取資料

    onMounted(async () => {
      let id = route.query.id;
      console.log(id);
      let res = await getPlaylistDetail(id);
      console.log(res);
      musics.playlist = res.data.playlist;
            console.log(musics.playlist);

      //進入歌單詳情,將歌單中的播放列表傳遞到store的playlist中去
 

            if(store.state.playlist[0].id!=musics.playlist.tracks[0].id ){
      store.commit('setPlayPouse',true)
      }
      store.commit('setPlaylist',musics.playlist.tracks)

      store.commit('setplayIndex',0)
    });

這裡改為了set up，存放資料變了

  setup() {
    const route = useRoute(); //當前元件的路由資訊物件  useRouter的返回值就是router，就能獲得到另一個網頁傳過來的id
 

    let musics = reactive({
      //儲存的是當前歌單的詳情
      playlist: {
        creator: {}, //歌單詳情
        tracks: {}, //歌單播放列表
      },
    });

前面有園子說能看一下store裡面的資料嗎，這裡展示一下，不再講了

import { createStore } from 'vuex'
const api=require('@/api/index.js')  

export default createStore({
  //元件之間共享的資料
  state: {
    playlist: [
      {
        name: "追夢赤子心",
        id: 355992,
        al: {
          id: 35139,
          name: "追夢痴子心",
          pic: 19061133579343590,
          picUrl: "http://p3.music.126.net/XDncptlBJ4_LN3hLBx-8aw==/19061133579343591.jpg",
          pic_str: "19061133579343591",
        }
      }
    ],
    playCurrentIndex: 0, //歌曲的下標
    paused: true,
    lyric:"" , //當前播放歌曲的歌詞
    user:{
        isLogin:false, //使用者的登陸狀態
        account:{},  //使用者的登陸id
        userDetail: {} //使用者詳情
    }
  },
  getters: {
  },
  mutations: {
    setPlaylist(state, value) {   //定義一個函式，修改state中的playlist音樂播放列表資料
      state.playlist = value;
    },
     pushPlayList(state,value){
       state.playlist.push(value);//push()在陣列的末尾追加內容
     },
    setPlayPouse(state, value) {   
      state.paused = value;
    },
    setplayIndex(state, value) {
      state.playCurrentIndex = value;// 前面傳過的值是多少，value的值就是什麼
    },
    setLyric(state,value){ //修改歌詞資料
      state.lyric=value
    },
    setUser(state,value){ //修改當前使用者的登陸狀態，等待使用者登陸驗證成功之後
      state.user=value;
    },
    deleteUser(state){   //定義一個函式，使用者推出時，刪除user中使用者登陸資料
        state.user.isLogin=false;
        state.user.account={};
        state.user.userDetail={};
    }
    
  },
  actions: {
   async reqLyric(content,payload){  //獲取歌詞詳情的函式  content：當前store物件
        let result =await api.getLyric(payload.id);
        // console.log(result.data.lrc.lyric)//拿到的歌詞
        console.log(result)
      content.commit('setLyric',result.data.lrc.lyric)

    },
    async phoneCheckLogin(content,payload){
      let result =await api.phoneLogin(payload.phone,payload.password);
      if(result.data.code==200){
        content.state.user.isLogin=true;
        content.state.user.account=result.data.account;

        //獲取當前登入使用者的詳情
        let res=await api.userDetail(result.data.account.id);//result.data.account.id當前登陸使用者的id
        console.log(res);
        content.state.user.userDetail=res.data;//將使用者詳情儲存到state的user資料中
        //將當前使用者登入資訊儲存到本地儲存中  JSON.stringfy將資料轉化為字串型別
        localStorage.userData=JSON.stringify(content.state.user);
      }
      return result
    }
  },
  modules: {
  }
})

這裡獲得資料，需要父傳子

三、在頁面上迴圈

略