不要在mutation回调函数之外,修改vuex仓库里属性的状态
[vuex] do not mutate vuex store state outside mutation handlers.
import * as types from './mutation-types'
import {playMode} from 'common/js/config'
import {shuffle} from 'common/js/util' 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)
}
不要在mutation回调函数之外,修改vuex仓库里属性的状态的更多相关文章
- 微信小程序开发——使用回调函数出现异常:TypeError: Cannot read property 'setData' of undefined
关键技术点: 作用域问题——回调函数中的作用域已经脱离了调用函数了,因此需要在回调函数外边把this赋给一个新的变量才可以了. 业务需求: 微信小程序开发,业务逻辑需要,需要把获取手机号码的业务逻辑作 ...
- C语言中的回调函数(Callback Function)
1 定义和使用场合 回调函数是指 使用者自己定义一个函数,实现这个函数的程序内容,然后把这个函数(入口地址)作为参数传入别人(或系统)的函数中,由别人(或系统)的函数在运行时来调用的函数.函数是你实现 ...
- iOS面向编码|iOSVideoToolbox:读写解码回调函数CVImageBufferRef的YUV图像
iOS面向编码|iOSVideoToolbox:读写解码回调函数CVImageBufferRef的YUV图像 本文档基于H.264的解码,介绍读写Video Toolbox解码回调函数参数CVImag ...
- Video Toolbox:读写解码回调函数CVImageBufferRef的YUV图像
本文档基于H.264的解码,介绍读写Video Toolbox解码回调函数参数CVImageBufferRef中的YUV或RGB数据的方法,并给出CVImageBufferRef生成灰度图代码.方便调 ...
- Erlang/OTP:基于Behaviour的回调函数
原始链接:https://blog.zhustec.me/posts/erlang-otp-1-callback-based-on-behaviour OTP 是什么 OTP 的全称是开源电信平台 ( ...
- 回调函数透彻理解Java
http://blog.csdn.net/allen_zhao_2012/article/details/8056665 回调函数透彻理解Java 标签: classjavastringinterfa ...
- 关于transition回调函数的几种写法
平时工作中经常遇到需要transition动画结束后触发某个功能的问题,但是在映像中好像只见过animate的回调函数, 而transition的很多属性无法在animate中使用,经过一些总结归纳, ...
- C++中类成员函数作为回调函数
注:与tr1::function对象结合使用,能获得更好的效果,详情见http://blog.csdn.net/this_capslock/article/details/38564719 回调函数是 ...
- 深入了解回调函数Java
打回来.我第一次看到Java编程思想,后来Observer模式也适用于一个回调函数的想法.但是,一直没有重视,在处于劣势的最终面试,越来越明白为什么那么多人说Java编程思想,这本书应该是一遍又一遍, ...
随机推荐
- 经常使用的cmd命令
ASSOC 显示或修改文件扩展名关联.ATTRIB 显示或更改文件属性.BREAK 设置或清除扩展式 CTRL+C 检查.BCDEDIT 设置启动数据库中的属性以控制启动加载.CACLS 显示或修改文 ...
- 关于jquery改变onclick方法,最保险的做法
function a(){ alert("a"); } function b(){ alert("b"); } <input type="but ...
- js获取后台map格式数据
后台: @RequestMapping("/dictList") @ResponseBody public Map<String, Object> positionLi ...
- [git] git合并冲突 本地已有项目上传 各种问题
git... 讲道理 我现在能隐约感觉到他的强大控制能力了 但是依旧是不习惯.... 无论是什么操作 在我这里都会出问题,,,, 上传本地已有的项目到码云 首先需要现在码云创建一个仓库 然后用git工 ...
- node 崩 处理
node_modules->bin webpack-dev-server.cmd @IF EXIST "%~dp0\node.exe" ( "%~dp0\node. ...
- 每天进步一点点------Allegro手工建立电路板
手工建立电路板步骤(以某个四层板为例): (1)file---new---board/board wizard来建立.brd电路板文件.设置名称和保存路径后,要设置绘图区域的大小,setup---dr ...
- Django数据迁移时(或者新建模型时)报错:Did you install mysqlclient,解决后又报错:mysqlclient 1.3.13 or newer is required;you have 0.9.3
报错信息如下: 解决方法一: 给项目根目录下mysite应用下的__init__.py文件加入如下代码: 运行又报错: 报错信息是: mysqlclient版本太低 点击上图框中的链接进入到pyth ...
- node学习之express(1)
1.前提是你安装了node,npm 2.此次我学习的网站是 汇智网 3.创建一个项目学习: npm init 按照提示,输入/不输入 项目的一些信息 安装express模块:npm install e ...
- 优酷1080p的kux格式文件怎么转换为MP4格式?
直接使用优酷自己的FFMPEG解码! 格式为:"优酷ffmpeg.exe的安装地址" -y -i ".kux文件储存地址" -c:v copy -c:a cop ...
- 什么是this指针?this的几种指向
在JavaScript中,this指针是在创建时,由系统默认生成的两个隐式参数之一(另一个是arguments). this指针指向与该函数调用进行隐式关联的一个对象,该对象被称为“函数上下文”. t ...