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

2022-05-08 17:34:38 阅读：196 来源： 互联网

标签：网易 playlist value 列表云极 state user id result

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

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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