zoukankan      html  css  js  c++  java
  • 不要在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)
    }
  • 相关阅读:
    android 5.1 WIFI图标上的感叹号及其解决办法
    Recovery和Charger模式下屏幕旋转180度
    Android屏幕旋转总结
    Spring MVC 数据校验@Valid
    Spring注解装配
    Spring简单的REST例子
    Spring怎么引入多个xml配置文件
    spring使用c3p0报错
    Spring+JTA+Atomikos+MyBatis分布式事务管理
    (2-3)Eureka详解
  • 原文地址:https://www.cnblogs.com/ladybug7/p/12348546.html
Copyright © 2011-2022 走看看