码迷,mamicode.com
首页 > 其他好文 > 详细

不要在mutation回调函数之外,修改vuex仓库里属性的状态

时间:2020-02-23 11:45:13      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:ati   splice   from   stat   handle   let   function   回调函数   vue   

[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仓库里属性的状态

标签:ati   splice   from   stat   handle   let   function   回调函数   vue   

原文地址:https://www.cnblogs.com/ladybug7/p/12348546.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!