zoukankan      html  css  js  c++  java
  • 修改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);
        }
    }

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



     
  • 相关阅读:
    javascript 基本数据类型
    数据库管理小工具帮助
    CSS3实现32种基本图形
    面试题2:替换空格
    面试题1:二维数组中查找
    图的深度优先和广度优先搜索算法
    Spring+Maven+Dubbo+MyBatis+Linner+Handlebars—Web开发环境搭建
    Spring学习笔记—最小化Spring XML配置
    Spring学习笔记—装配Bean
    Spring学习笔记—Spring之旅
  • 原文地址:https://www.cnblogs.com/shengnan-2017/p/10432501.html
Copyright © 2011-2022 走看看