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 相关文章推荐
JS DOM 操作实现代码
Aug 01 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
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文件管理基本功能简单操作
2017/01/16 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
JavaScript中length属性的使用方法
2015/06/05 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
python获取多线程及子线程的返回值
2017/11/15 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
python实现定时提取实时日志程序
2018/06/22 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
民主评议党员自我评价材料
2014/09/18 职场文书
狮子林导游词
2015/02/03 职场文书
医院病假条怎么写
2015/08/17 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
vue中 this.$set的使用详解
2021/11/17 Vue.js
解决Redis启动警告问题
2022/02/24 Redis
Vue的生命周期一起来看看
2022/02/24 Vue.js
全新239军机修复记
2022/04/05 无线电
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js