网易云极简实现（歌曲列表）

看到这，相信你们都能大概理解了，我就简写一下

之前写的忘了引入组件和方法了

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: {
  }
})

这里获得数据，需要父传子

三、在页面上循环

略

标签：网易,playlist,value,列表,云极,state,user,id,result
来源： https://www.cnblogs.com/cth529410/p/16246152.html