其他分享
首页 > 其他分享> > 不要在mutation回调函数之外,修改vuex仓库里属性的状态

不要在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)
}

 

标签:playlist,仓库,let,mutation,splice,currentIndex,vuex,types,sequenceList
来源: https://www.cnblogs.com/ladybug7/p/12348546.html