Do not mutate vuex store state outside mutation handlers.


組件代碼:

selectItem(item,index) {
    this.selectPlay({
        list: this.songs,
        index
    })
},
...mapActions([
    'selectPlay'
])

mutation 代碼:

  [types.SET_PLAYLIST](state, list) {
    // 1、state.playlist = JSON.parse(JSON.stringify(list))
    // 2、state.playlist = Object.assign([], list)
    state.sequenceList = list
  },
  [types.SET_SEQUENCE_LIST](state, list) {
    // 1、state.sequenceList = JSON.parse(JSON.stringify(list))
    // 2、state.sequenceList = Object.assign([], list)
    state.sequenceList = list
  },

actions 代碼:

import * as types from './mutation-types'

export const selectPlay = function({commit, state}, {list, index}) {
    commit(types.SET_SEQUENCE_LIST, list)
    commit(types.SET_PLAYLIST, list)
    commit(types.SET_CURRENT_INDEX, index)
    commit(types.SET_FULL_SCREEN, true)
    commit(types.SET_PLAYING_STATE, true)
}

一直報 Do not mutate vuex store state outside mutation handlers. 

但是確實是在mutation 的 handler 里面更改的狀態,而且是 commit 的。

問題出在了 payload ,在這的 list 是一個數組,是一個引用類型,所以就有可能在 vuex 之外的地方改變了 list。那么就有可能 this._committing 的值就不會變為 true 。所以就會報這個錯。

解決辦法就是把 list clone一下,在 mutation 代碼那塊的注釋部分就是 clone 的辦法,這樣就不會在 vuex 之外的地方改變 state 了。推薦使用第二個方法,第二個方法的性能優於第一個


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM