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 options属性集合操作代码
Dec 28 Javascript
firefox插件Firebug的使用教程
Jan 02 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
jQuery 获取对象 定位子对象
May 31 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
JS面向对象编程详解
Mar 06 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
微信小程序实现人脸检测功能
May 25 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入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
详解webpack介绍&安装&常用命令
2017/06/29 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
python matplotlib拟合直线的实现
2019/11/19 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
树莓派升级python的具体步骤
2020/07/05 Python
python time.strptime格式化实例详解
2021/02/03 Python
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
组织关系转移介绍信
2014/01/16 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
音乐幼师求职信
2014/07/09 职场文书
教学副校长工作总结
2015/08/13 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python