您好,登錄后才能下訂單哦!
這篇文章主要講解了如何實現(xiàn)Vuex的各個模塊封裝,內(nèi)容清晰明了,對此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會有幫助。
一、各個模塊的作用:
二、 創(chuàng)建文件:
三、編輯文件
這里只是拿出自己的項目來做一個例子,只是介紹封裝的方法。
index.js
import Vue from 'vue' import Vuex from 'vuex' import * as actions from './actions' import * as getters from './getters' import state from './state' import mutations from './mutations' import createLogger from 'vuex/dist/logger' // vuex調(diào)試工具 Vue.use(Vuex) const debug = process.env.NODE_ENV !== 'prodycution' // 開發(fā)環(huán)境下開啟嚴(yán)格模式 export default new Vuex.Store({ actions, getters, state, mutations, strict: debug, plugins: debug ? [createLogger()] : [] })
state.js
import {playMode} from 'common/js/config' import {loadSearch} from 'common/js/cache' const state = { singer: {}, playing: false, fullScreen: false, playlist: [], sequenceList: [], mode: playMode.sequence, currentIndex: -1, disc: {}, topList: {}, searchHistory: loadSearch() } export default state
mutations.js
import * as types from './mutation-types' const mutations = { [types.SET_SINGER](state, singer) { state.singer = singer }, [types.SET_PLAYING_STATE](state, flag) { state.playing = flag }, [types.SET_FULL_SCREEN](state, flag) { state.fullScreen = flag }, [types.SET_PLAYLIST](state, list) { state.playlist = list }, [types.SET_SEQUENCE_LIST](state, list) { state.sequenceList = list }, [types.SET_PLAY_MODE](state, mode) { state.mode = mode }, [types.SET_CURRENT_INDEX](state, index) { state.currentIndex = index }, [types.SET_DISC](state, disc) { state.disc = disc }, [types.SET_TOP_LIST](state, topList) { state.topList = topList }, [types.SET_SEARCH_HISTORY](state, history) { state.searchHistory = history } } export default mutations
mutation-types.js
export const SET_SINGER = 'SET_SINGER' export const SET_PLAYING_STATE = 'SET_PLAYING_STATE' export const SET_FULL_SCREEN = 'SET_FULL_SCREEN' export const SET_PLAYLIST = 'SET_PLAYLIST' export const SET_SEQUENCE_LIST = 'SET_SEQUENCE_LIST' export const SET_PLAY_MODE = 'SET_PLAY_MODE' export const SET_CURRENT_INDEX = 'SET_CURRENT_INDEX' export const SET_DISC = 'SET_DISC' export const SET_TOP_LIST = 'SET_TOP_LIST' export const SET_SEARCH_HISTORY = 'SET_SEARCH_HISTORY'
getters.js
export const singer = state => state.singer export const playing = state => state.playing export const fullScreen = state => state.fullScreen export const playlist = state => state.playlist export const sequenceList = state => state.sequenceList export const mode = state => state.mode export const currentIndex = state => state.currentIndex export const currentSong = (state) => { return state.playlist[state.currentIndex] || {} } export const disc = state => state.disc export const topList = state => state.topList export const searchHistory = state => state.searchHistory
actions.js
import * as types from './mutation-types' import {playMode} from 'common/js/config' import {shuffle} from 'common/js/util' import {saveSearch, deleteSearch, clearSearch} from 'common/js/cache' function findIndex(list, song) { return list.findIndex((item) => { return item.id === song.id }) } export const selectPlay = function ({commit, state}, {list, index}) { commit(types.SET_SEQUENCE_LIST, list) if (state.mode === playMode.random) { let randomList = shuffle(list) commit(types.SET_PLAYLIST, randomList) index = findIndex(randomList, list[index]) } else { commit(types.SET_PLAYLIST, list) } commit(types.SET_CURRENT_INDEX, index) commit(types.SET_FULL_SCREEN, true) commit(types.SET_PLAYING_STATE, true) } export const randomPlay = function({commit}, {list}) { commit(types.SET_PLAY_MODE, playMode.random) commit(types.SET_SEQUENCE_LIST, list) let randomList = shuffle(list) commit(types.SET_PLAYLIST, randomList) commit(types.SET_CURRENT_INDEX, 0) commit(types.SET_FULL_SCREEN, true) commit(types.SET_PLAYING_STATE, true) } export const insertSong = function({commit, state}, song) { let playlist = state.playlist.slice() let sequenceList = state.sequenceList.slice() let currentIndex = state.currentIndex // 記錄當(dāng)前歌曲 let currentSong = playlist[currentIndex] // 查找當(dāng)前列表中是否有待插入的歌曲并返回其索引 let fpIndex = findIndex(playlist, song) // 因為是插入歌曲,所以索引要+1 currentIndex++ // 插入這首歌到當(dāng)前索引位置 playlist.splice(currentIndex, 0, song) // 如果已經(jīng)包含這首歌 if (fpIndex > -1) { // 如果當(dāng)前插入的序號大于列表中的序號 if (currentIndex > fpIndex) { playlist.splice(fpIndex, 1) currentIndex-- } else { playlist.splice(fpIndex + 1, 1) } } let currentSIndex = findIndex(sequenceList, currentSong) + 1 let fsIndex = findIndex(sequenceList, song) sequenceList.splice(currentSIndex, 0, song) if (fsIndex > -1) { if (currentSIndex > fsIndex) { sequenceList.splice(fsIndex, 1) } else { sequenceList.splice(fsIndex + 1, 1) } } commit(types.SET_PLAYLIST, playlist) commit(types.SET_SEQUENCE_LIST, sequenceList) commit(types.SET_CURRENT_INDEX, currentIndex) commit(types.SET_FULL_SCREEN, true) commit(types.SET_PLAYING_STATE, true) } export const saveSearchHistory = function({commit}, query) { commit(types.SET_SEARCH_HISTORY, saveSearch(query)) } export const deleteSearchHistory = function({commit}, query) { commit(types.SET_SEARCH_HISTORY, deleteSearch(query)) } export const clearSeachHistory = function({commit}) { commit(types.SET_SEARCH_HISTORY, clearSearch()) }
小貼士:
默認(rèn)接口: export default
具名接口: export
1、export導(dǎo)出多個對象,export default只能導(dǎo)出一個對象。
2、export導(dǎo)出對象需要用{ },export default不需要{ }。
3、在其他文件引用export default導(dǎo)出的對象時不一定使用導(dǎo)出時的名字。因為這種方式實際上是將該導(dǎo)出對象設(shè)置為默認(rèn)導(dǎo)出對象。
4、導(dǎo)入和導(dǎo)出都可以使用as重新命名,as前為原來的名字,后為定義后的名字。
舉例:
import * as someIdentifier from "someModule"; *************************************** export { es6 as default } from './someModule'; // 等同于 import { es6 } from './someModule'; export default es6;
看完上述內(nèi)容,是不是對如何實現(xiàn)Vuex的各個模塊封裝有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。