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

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