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 相关文章推荐
Jquery 获取checkbox的checked问题
Nov 16 Javascript
js调用css属性写法
Sep 21 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 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中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
smarty实现多级分类的方法
2014/12/05 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
跟老齐学Python之重回函数
2014/10/10 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
Python中logging实例讲解
2019/01/17 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
python logging设置level失败的解决方法
2020/02/19 Python
基于python 凸包问题的解决
2020/04/16 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
大学生职业规划书的范本
2014/02/18 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
政府四风问题整改措施
2014/10/04 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
2014年度培训工作总结
2014/11/27 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
清明节主题班会
2015/08/14 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS