Vuex的各个模块封装的实现
2020-06-20 11:48
901 查看
一、各个模块的作用:
- 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 模块封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
相关文章推荐
- Vue中的transition封装组件的实现方法
- Spring没有对ORM模块提供自己的实现,只对JDBC和其他ORM框架进行了封装。
- vue实现图片预览组件的封装与使用
- python实现wininet封装模块
- vue实现压缩图片预览并上传功能(promise封装)
- Vue2.0+ElementUi封装table组件实现分页功能
- Vue开发公共模块封装(msg)
- 循序渐进企业级搜索引擎之Master模块设计及实现-系统请求响应封装模块
- 只需5步,教你实现Vue组件封装
- python3 利用xlrd模块封装实现读取表格数据
- Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
- Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
- python将logging模块封装成单独模块并实现动态切换Level
- 数据列表实现方式(基于Vue.js封装)
- 基于Vue+element-ui 的Table二次封装的实现
- 原生JS实现移动端模块的左右滑动切换效果,基于vue、stylus
- 二次封装el-button实现的vue权限按钮组件
- Vue + Element UI 实现权限管理系统 前端篇(七):功能组件封装
- 从组件封装看Vue的作用域插槽的实现
- vue 封装组件 实现自定义双向绑定