Vuex的各个模块封装

一、各个模块的作用：

• 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;