修改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); }
}

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