Vuex的各個模組封裝的實現

阿新 • • 發佈：2020-06-07

一、各個模組的作用：

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)
}

export const insertSong = function({commit,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,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,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)
}

export const saveSearchHistory = function({commit},query) {
 commit(types.SET_SEARCH_HISTORY,saveSearch(query))
}

export const deleteSearchHistory = function({commit},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 模組封裝內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！