時(shí)間：2023-04-24 17:03:02 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-04-24 17:03:02 來源：網(wǎng)站運(yùn)營(yíng)
【個(gè)人練習(xí)】網(wǎng)易云音樂PC端仿站 Vue 2（二）：
在線咨詢
vuex實(shí)現(xiàn)組件之間數(shù)據(jù)共享和狀態(tài)管理。按照不同的功能，劃分為不同的模塊。music：主要用來管理當(dāng)前播放的音樂和當(dāng)前的播放列表user：主要用來管理用戶信息、用戶ID和cookienamespaced: true)，所有功能區(qū)分模塊，更高封裝度和復(fù)用。MUSICNOW：當(dāng)前播放歌曲的IDMUSICLIST：播放列表中歌曲ID以逗號(hào)分隔構(gòu)成的字符串COOKIE：cookieUSERID：用戶ID// ====================== index.js ======================import Vue from 'vue'import Vuex from 'vuex'// 導(dǎo)入模塊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: [], // 當(dāng)前播放列表 musicNow: {} // 當(dāng)前播放的歌曲 } }, mutations: { // 修改播放列表 setMusicList(state, list) { state.musicList = list || []; }, // 修改當(dāng)前播放的歌曲 setMusicNow(state, music) { state.musicNow = music || {}; } }, actions: { // 從本地獲取當(dāng)前播放的歌曲 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); } }, // 修改當(dāng)前播放的歌曲 async setMusicNow({ commit }, id) { localStorage.setItem('MUSICNOW', id); let result = await reqSongDetail(id); commit('setMusicNow', result.songs[0]) }, // 修改當(dāng)前播放列表 async setMusicList({ commit }, ids) { localStorage.setItem('MUSICLIST', ids) let result = await reqSongDetail(ids); commit('setMusicList', result.songs); }, // 在當(dāng)前播放列表中添加歌曲 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); // 如果刪除的歌曲正好為當(dāng)前播放的歌曲 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' // 導(dǎo)入樣式重置less文件import '@/assets/styles/global.less' // 導(dǎo)入公共樣式2. 將所有接口方法單獨(dú)封裝在一個(gè)JS文件中，并綁定到Vue實(shí)例原型對(duì)象上import * as API from '@/api'Vue.prototype.$api = API3. 圖片懶加載，使用時(shí)將<img>標(biāo)簽中屬性src換為v-lazy即可import VueLazyload from 'vue-lazyload'// 圖片懶加載Vue.use(VueLazyload, { loading: require('@/assets/images/loading.gif'), // 加載時(shí)默認(rèn)顯示的圖片})4. 在Vue實(shí)例原型對(duì)象上掛載全局事件總線，用于組件之間傳遞數(shù)據(jù)、調(diào)用方法Vue.prototype.$bus = new Vue()關(guān)鍵詞：音樂,練習(xí)
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
