[vuex] do not mutate vuex store state outside mutation handlers.

  1. import * as types from './mutation-types'
  2. import {playMode} from 'common/js/config'
  3. import {shuffle} from 'common/js/util'
  4.  
  5. export const insertSong = function({commit, state}, song) {
  6. let playlist = state.playlist.slice() // 创建一个副本
  7. let sequenceList = state.sequenceList.slice() // 创建一个副本
  8. let currentIndex = state.currentIndex
  9. // 记录当前歌曲
  10. let currentSong = playlist[currentIndex]
  11. // 查找当前列表中是否有待插入的歌曲并返回其索引
  12. let fpIndex = findIndex(playlist, song)
  13. // 因为是插入歌曲,所以索引+1
  14. currentIndex++
  15. // 插入这首歌到当前索引位置
  16. playlist.splice(currentIndex, 0, song)
  17. // 如果已经包含了这首歌
  18. if (fpIndex > -1) {
  19. // 如果当前插入的序号大于列表中的序号
  20. if (currentIndex > fpIndex) {
  21. playlist.splice(fpIndex, 1)
  22. currentIndex--
  23. } else {
  24. playlist.splice(fpIndex + 1, 1)
  25. }
  26. }
  27.  
  28. let currentSIndex = findIndex(sequenceList, currentSong) + 1
  29.  
  30. let fsIndex = findIndex(sequenceList, song)
  31.  
  32. sequenceList.splice(currentSIndex, 0, song)
  33.  
  34. if (fsIndex > -1) {
  35. if (currentSIndex > fsIndex) {
  36. sequenceList.splice(fsIndex, 1)
  37. } else {
  38. sequenceList.splice(fsIndex + 1, 1)
  39. }
  40. }
  41.  
  42. commit(types.SET_PLAYLIST, playlist)
  43. commit(types.SET_SEQUENCE_LIST, sequenceList)
  44. commit(types.SET_CURRENT_INDEX, currentIndex)
  45. commit(types.SET_FULL_SCREEN, true)
  46. commit(types.SET_PLAYING_STATE, true)
  47. }

不要在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. 1、spring与springmvc父子容器

    转载于http://www.tianshouzhi.com/api/tutorials/spring 1.0 spring与springmvc父子容器 1.spring和springmvc父子容器概念 ...

  2. 【转】C#路径中获取文件全路径、目录、扩展名、文件名称

    C#路径中获取文件全路径.目录.扩展名.文件名称 原文链接:https://www.cnblogs.com/JiYF/p/6879139.html 常用函数 需要引用System.IO   直接可以调 ...

  3. java基础之 类型转换

    一.自动类型转换 1.java中不同类型的数据在计算时,为保证数据的精度,数据的类型会以大容量的类型为主: 2.自动类型转换的排序: char.byte.short -> int -> l ...

  4. char nchar varchar nvarchar varchar2区别

    char(n):长度不可变,长度为n个字节,非Unicode字符 nchar(n):长度不可变,长度为2n个字节,Unicode字符 varchar(n):长度可变,长度为n个字节,非Unicode字 ...

  5. 怎么把VS里的scanf_s换成scanf

    转自:https://blog.csdn.net/hansionz/article/details/79889039 方法一:在项目属性中---->配置属性------>C\C++---- ...

  6. 【C语言】指针函数例子

    #include<stdio.h> char* getword(char); char* getword(char c) { switch (c) { case'A':return&quo ...

  7. TCL create list from file

    proc create_list {filename {prompt verbose} {opts "" }} { set list_return {} if {[file exi ...

  8. 使用java实现AES算法的加解密(亲测可用)

    话不多说,直接上代码 import javax.crypto.Cipher;   import javax.crypto.spec.IvParameterSpec; import javax.cryp ...

  9. 【转载】Windows环境下JNI的实现实例

    转自:http://blog.csdn.net/jjunjoe/article/details/6987183 一.关于JNI: JNI(Java Native Interface):Java本地调用 ...

  10. jquery--获取input checkbox是否被选中以及渲染checkbox选中状态

    jquery获取checkbox是否被选中 html <div><input type="checkbox" id="is_delete" n ...