組件代碼：

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 了。推薦使用第二個方法，第二個方法的性能優于第一個

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的Do not mutate vuex store state outside mutation handlers.的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。