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直接编辑当前cookie的脚本
Sep 14 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 Javascript
js实现翻牌小游戏
Jul 31 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 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中DOMElement操作xml文档实例演示
2013/03/26 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
php7性能提升的原因详解
2019/10/13 PHP
JavaScript 变量基础知识
2009/11/07 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
python导入时小括号大作用
2017/01/10 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
金融学专业大学生职业生涯规划
2014/03/07 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
超市店长竞聘书
2015/09/15 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
python基础之错误和异常处理
2021/10/24 Python