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

这样穿件来的值就不会报错了