时间：2023-04-24 17:03:02 | 来源：网站运营
时间：2023-04-24 17:03:02 来源：网站运营
【个人练习】网易云音乐PC端仿站 Vue 2（二）：
在线咨询
vuex实现组件之间数据共享和状态管理。按照不同的功能，划分为不同的模块。music：主要用来管理当前播放的音乐和当前的播放列表user：主要用来管理用户信息、用户ID和cookienamespaced: true)，所有功能区分模块，更高封装度和复用。MUSICNOW：当前播放歌曲的IDMUSICLIST：播放列表中歌曲ID以逗号分隔构成的字符串COOKIE：cookieUSERID：用户ID// ====================== index.js ======================import Vue from 'vue'import Vuex from 'vuex'// 导入模块import music from './music.js'import user from './user.js'Vue.use(Vuex)export default new Vuex.Store({ // 分模块 modules: { music, user }})// ====================== music.js ======================import { reqSongDetail } from '@/api'export default { namespaced: true, state() { return { musicList: [], // 当前播放列表 musicNow: {} // 当前播放的歌曲 } }, mutations: { // 修改播放列表 setMusicList(state, list) { state.musicList = list || []; }, // 修改当前播放的歌曲 setMusicNow(state, music) { state.musicNow = music || {}; } }, actions: { // 从本地获取当前播放的歌曲 async getMusicNow({ commit }) { let id = localStorage.getItem('MUSICNOW'); if (id) { let result = await reqSongDetail(id); commit('setMusicNow', result.songs[0]); } }, // 从本地获取播放列表 async getMusicList({ commit }) { let idList = localStorage.getItem('MUSICLIST'); if (idList) { let result = await reqSongDetail(idList); commit('setMusicList', result.songs); } }, // 修改当前播放的歌曲 async setMusicNow({ commit }, id) { localStorage.setItem('MUSICNOW', id); let result = await reqSongDetail(id); commit('setMusicNow', result.songs[0]) }, // 修改当前播放列表 async setMusicList({ commit }, ids) { localStorage.setItem('MUSICLIST', ids) let result = await reqSongDetail(ids); commit('setMusicList', result.songs); }, // 在当前播放列表中添加歌曲 addMusic({ dispatch }, id) { let ids = localStorage.getItem('MUSICLIST') if (!ids || ids === '') { ids = id } else { if (ids.indexOf(id) == -1) { ids = id + ',' + ids } } dispatch('setMusicList', ids) }, // 删除播放列表中的歌曲 delMusic({ dispatch }, id) { id = String(id) let list = localStorage.getItem('MUSICLIST'); list = list.split(','); let idx = list.indexOf(id); list.splice(idx, 1); // 如果删除的歌曲正好为当前播放的歌曲 if (id === localStorage.getItem('MUSICNOW')) { dispatch('setMusicNow', list[idx % list.length]) } let ids = list.join(','); dispatch('setMusicList', ids); }, // 清空播放列表 clearList({ commit }) { localStorage.removeItem('MUSICLIST') localStorage.removeItem('MUSICNOW') commit('setMusicNow') commit('setMusicList') } }}// ====================== user.js ======================import { reqUserAccount, reqLogout } from '@/api' export default { namespaced: true, state() { return { cookie: localStorage.getItem('COOKIE'), // cookie userId: localStorage.getItem('USERID'), // 用户ID userInfo: {} // 用户信息 } }, mutations: { // 修改cookie setCookie(state, cookie) { localStorage.setItem('COOKIE', cookie) state.cookie = cookie }, // 修改用户ID setUserId(state, userId) { localStorage.setItem('USERID', userId) state.userId = userId }, // 修改用户信息 setUserInfo(state, userInfo) { state.userInfo = userInfo }, // 退出登录，清除本地保存到的用户信息 logout(state) { state.cookie = '' state.userId = '' state.userInfo = {} localStorage.removeItem('COOKIE') localStorage.removeItem('USERID') } }, actions: { // 更新cookie setCookie({ commit }, cookie) { commit('setCookie', cookie) }, // 更新用户ID setUserId({ commit }, userId) { commit('setUserId', userId) }, // 更新用户信息 setUserInfo({ commit }, userInfo) { commit('setUserInfo', userInfo) }, // 获取用户信息 async getUserInfo({ commit }, cookie) { let result = await reqUserAccount(cookie) if (result.code === 200) { commit('setUserId', result.account.id) commit('setUserInfo', result.profile) } }, // 退出登录 async logout({commit}) { await reqLogout() commit("logout") } }}main.js文件配置import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'Vue.config.productionTip = falsenew Vue({ router, store, render: h => h(App)}).$mount('#app')import '@/assets/styles/reset.less' // 导入样式重置less文件import '@/assets/styles/global.less' // 导入公共样式2. 将所有接口方法单独封装在一个JS文件中，并绑定到Vue实例原型对象上import * as API from '@/api'Vue.prototype.$api = API3. 图片懒加载，使用时将<img>标签中属性src换为v-lazy即可import VueLazyload from 'vue-lazyload'// 图片懒加载Vue.use(VueLazyload, { loading: require('@/assets/images/loading.gif'), // 加载时默认显示的图片})4. 在Vue实例原型对象上挂载全局事件总线，用于组件之间传递数据、调用方法Vue.prototype.$bus = new Vue()关键词：音乐,练习
