[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仓库里属性的状态的更多相关文章

  1. 微信小程序开发——使用回调函数出现异常:TypeError: Cannot read property 'setData' of undefined

    关键技术点: 作用域问题——回调函数中的作用域已经脱离了调用函数了,因此需要在回调函数外边把this赋给一个新的变量才可以了. 业务需求: 微信小程序开发,业务逻辑需要,需要把获取手机号码的业务逻辑作 ...

  2. C语言中的回调函数(Callback Function)

    1 定义和使用场合 回调函数是指 使用者自己定义一个函数,实现这个函数的程序内容,然后把这个函数(入口地址)作为参数传入别人(或系统)的函数中,由别人(或系统)的函数在运行时来调用的函数.函数是你实现 ...

  3. iOS面向编码|iOSVideoToolbox:读写解码回调函数CVImageBufferRef的YUV图像

    iOS面向编码|iOSVideoToolbox:读写解码回调函数CVImageBufferRef的YUV图像 本文档基于H.264的解码,介绍读写Video Toolbox解码回调函数参数CVImag ...

  4. Video Toolbox:读写解码回调函数CVImageBufferRef的YUV图像

    本文档基于H.264的解码,介绍读写Video Toolbox解码回调函数参数CVImageBufferRef中的YUV或RGB数据的方法,并给出CVImageBufferRef生成灰度图代码.方便调 ...

  5. Erlang/OTP:基于Behaviour的回调函数

    原始链接:https://blog.zhustec.me/posts/erlang-otp-1-callback-based-on-behaviour OTP 是什么 OTP 的全称是开源电信平台 ( ...

  6. 回调函数透彻理解Java

    http://blog.csdn.net/allen_zhao_2012/article/details/8056665 回调函数透彻理解Java 标签: classjavastringinterfa ...

  7. 关于transition回调函数的几种写法

    平时工作中经常遇到需要transition动画结束后触发某个功能的问题,但是在映像中好像只见过animate的回调函数, 而transition的很多属性无法在animate中使用,经过一些总结归纳, ...

  8. C++中类成员函数作为回调函数

    注:与tr1::function对象结合使用,能获得更好的效果,详情见http://blog.csdn.net/this_capslock/article/details/38564719 回调函数是 ...

  9. 深入了解回调函数Java

    打回来.我第一次看到Java编程思想,后来Observer模式也适用于一个回调函数的想法.但是,一直没有重视,在处于劣势的最终面试,越来越明白为什么那么多人说Java编程思想,这本书应该是一遍又一遍, ...

随机推荐

  1. Django初步皮毛

    Django是一个用python编写的Web框架. #Django安装 pip install Django 然后是配置环境变量,将这目录添加到系统环境变量中: C:\Python33\Lib\sit ...

  2. goahead 流程

    原文:https://blog.csdn.net/qq_32419007/article/details/80756643 1.全局变量 Web服务器的根目录 static char_t        ...

  3. 免费天气API,天气JSON API,不限次数获取十五天的天气预报

    紧急情况说明: 禁用IP列表: 39.104.69.*(原因39.104.69.6 在2018年10月的 17~20日 排行为top 1,每天几十万次.) 47.98.211.* (原因47.98.2 ...

  4. 解决Cannot download "https://github.com/sass/node-sass/releases/download/binding.nod的问题

    npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

  5. 1+x证书Web 前端开发初级——理论考试(试卷1)

    1+x证书Web 前端开发初级——理论考试(试卷1) 一.单选题(每小题 2 分,共 30 小题,共 60 分) 1.HTML 语言中,设置表格中文字与边框距离的标签是() A.<table b ...

  6. mnist 数据集的识别源码解析

    在基本跑完识别代码后,再来谈一谈自己对代码的理解: 1      前向传播过程文件(mnist_forward.py) 第一个函数get_weight(shape, regularizer); 定义了 ...

  7. layui-table 样式

    <!DOCTYPE html> <html> <head> <style> #lay-table { background-color: #fff; c ...

  8. 高内存 高CPU 劣质网络下的测试

    内存 先把系统的虚拟内存去掉 (右键我的电脑属性里有的.选择那个无分页文件 虚拟内存在任务管理器就不显示了), 然后机子本身内存不高,开几个网页就满了       CPU cpu可以用鲁大师测试cpu ...

  9. ubuntu12.04安装Opencv2.4.9

    之前在Linux下装过几次opencv,但几乎每次都要查一下怎么安装,这次索性记录一下安装过程,不用每次都看其他人的教程了. 至于安装过程,可以直接参考官方文档.在解压后的文件夹下opencv\bui ...

  10. [lua]紫猫lua教程-命令宝典-L1-01-04. 字符串数据

    L1[字符串]01. 单引号与双引号 没什么说得 字符串:以双引号包含 或者单引号包含 或者[[]]包含 L1[字符串]02. 长文本内容 小知识:如果用[[]]包含字符串内容 但是字符串内容里面 包 ...