個(gè)人中心
退出
Vuex的各個(gè)模塊封裝
一、各個(gè)模塊的作用：
state 用來(lái)數(shù)據(jù)共享數(shù)據(jù)存儲(chǔ)
mutation 用來(lái)注冊(cè)改變數(shù)據(jù)狀態(tài)（同步）
getters 用來(lái)對(duì)共享數(shù)據(jù)進(jìn)行過(guò)濾并計(jì)數(shù)操作
action 解決異步改變共享數(shù)據(jù)（異步）
二、 創(chuàng)建文件：
actions.js
getters.js
index.js
mutations.js
mutation-types.js
state.js
三、編輯文件
這里只是拿出自己的項(xiàng)目來(lái)做一個(gè)例子，只是介紹封裝的方法。
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' // 開(kāi)發(fā)環(huán)境下開(kāi)啟嚴(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)
// 因?yàn)槭遣迦敫枨运饕?1
currentIndex++
// 插入這首歌到當(dāng)前索引位置
playlist.splice(currentIndex, 0, song)
// 如果已經(jīng)包含這首歌
if (fpIndex > -1) {
// 如果當(dāng)前插入的序號(hào)大于列表中的序號(hào)
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)出多個(gè)對(duì)象，export default只能導(dǎo)出一個(gè)對(duì)象。
2、export導(dǎo)出對(duì)象需要用{ }，export default不需要{ }。
3、在其他文件引用export default導(dǎo)出的對(duì)象時(shí)不一定使用導(dǎo)出時(shí)的名字。因?yàn)檫@種方式實(shí)際上是將該導(dǎo)出對(duì)象設(shè)置為默認(rèn)導(dǎo)出對(duì)象。
4、導(dǎo)入和導(dǎo)出都可以使用as重新命名，as前為原來(lái)的名字，后為定義后的名字。
舉例：
import * as someIdentifier from "someModule";
***************************************
export { es6 as default } from './someModule';
// 等同于
import { es6 } from './someModule';
export default es6;
作者：Vam的金豆之路
主要領(lǐng)域：前端開(kāi)發(fā)
我的微信：maomin9761
微信公眾號(hào)：前端歷劫之路
分類(lèi)導(dǎo)航