Vuex的各个模块封装的实现


Posted in Javascript onJune 05, 2020

一、各个模块的作用:

  • 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 模块封装内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
解析javascript系统错误:-1072896658的解决办法
Jul 08 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
javaScript中的空值和假值
Dec 18 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 #Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 #Javascript
vscode 插件开发 + vue的操作方法
Jun 05 #Javascript
vue渲染方式render和template的区别
Jun 05 #Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 #Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 #Javascript
VueX模块的具体使用(小白教程)
Jun 05 #Javascript
You might like
PHP 七大优势分析
2009/06/23 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
PHP Cookie学习笔记
2016/08/23 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
sublime text 3配置使用python操作方法
2017/06/11 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
医科学校毕业生自荐信
2013/11/09 职场文书
质检员岗位职责
2013/12/17 职场文书
会议接待欢迎词
2014/01/12 职场文书
上班上网检讨书
2014/01/29 职场文书
少先队中队工作总结
2015/08/14 职场文书
聘任合同书
2015/09/21 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
实例详解Python的进程,线程和协程
2022/03/13 Python