您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要讲解了如何实现Vuex的各个模块封装,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
一、各个模块的作用:
二、 创建文件:
三、编辑文件
这里只是拿出自己的项目来做一个例子,只是介绍封装的方法。
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调试工具 Vue.use(Vuex) const debug = process.env.NODE_ENV !== 'prodycution' // 开发环境下开启严格模式 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 // 记录当前歌曲 let currentSong = playlist[currentIndex] // 查找当前列表中是否有待插入的歌曲并返回其索引 let fpIndex = findIndex(playlist, song) // 因为是插入歌曲,所以索引要+1 currentIndex++ // 插入这首歌到当前索引位置 playlist.splice(currentIndex, 0, song) // 如果已经包含这首歌 if (fpIndex > -1) { // 如果当前插入的序号大于列表中的序号 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()) }
小贴士:
默认接口: export default
具名接口: export
1、export导出多个对象,export default只能导出一个对象。
2、export导出对象需要用{ },export default不需要{ }。
3、在其他文件引用export default导出的对象时不一定使用导出时的名字。因为这种方式实际上是将该导出对象设置为默认导出对象。
4、导入和导出都可以使用as重新命名,as前为原来的名字,后为定义后的名字。
举例:
import * as someIdentifier from "someModule"; *************************************** export { es6 as default } from './someModule'; // 等同于 import { es6 } from './someModule'; export default es6;
看完上述内容,是不是对如何实现Vuex的各个模块封装有进一步的了解,如果还想学习更多内容,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。