如何实现Vuex的各个模块封装
这篇文章主要讲解了如何实现Vuex的各个模块封装,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
成都创新互联长期为上1000+客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为磴口企业提供专业的成都网站制作、做网站,磴口网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。
一、各个模块的作用:
- state 用来数据共享数据存储
- mutation 用来注册改变数据状态(同步)
- getters 用来对共享数据进行过滤并计数操作
- action 解决异步改变共享数据(异步)
二、 创建文件:
- actions.js
- getters.js
- index.js
- mutations.js
- mutation-types.js
- state.js
三、编辑文件
这里只是拿出自己的项目来做一个例子,只是介绍封装的方法。
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的各个模块封装有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。
网页标题:如何实现Vuex的各个模块封装
本文链接:http://scyanting.com/article/peshcd.html