修改vuex狀態機中的數據

vuex狀態機中的數據是必須提交mutation來修改，如果現實開發中，我們需要修改，而又不想提交mutaition，應該怎么做呢？

 

先來回顧一下場景，有一個列表是存在vuex中的

 

這個列表展示的情況如下

現在，要對文件夾進行編輯，編輯頁面是一個子組件，頁面效果如下

 

 

現在父子組件進行通信

 

子組件通過props接收父組件傳進來的

  props: {
    editFolderData: Object
  }

這個時候，發現editFolderData取不到值！！！原因是，props中editFolderData可能是動態的，要放在watch中監測,但是這個帶來了新的問題：vuex報錯

 watch: { // editFolderData取不到值，原因是，props中editFolderData可能是動態的，要放在watch中監測
 editFolderData(newVal, oldVal) { this.formData = newVal; } }

但是這個時候報錯了！！！！

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers."

 

原因是：vuex不允許不通過mutaition來修改state

解決辦法：

editFolderData傳進來之前就讓其脫離vuex

import _ from "lodash";

export default {

// 點擊編輯按鈕
 handleEdit(item) { // [Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers."
      // 解決方法：傳進來的值，先進行一次深拷貝通過lodash中的cloneDeep()方法，讓其脫離Vuex狀態機,
        // 文件夾this.editFolderData = _.cloneDeep(item); }
}

這樣穿件來的值就不會報錯了