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

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



     
  • 相关阅读:
    C++11并发之std::thread<转>
    YUV420格式解析<转>
    在windows、linux中开启nginx的Gzip压缩大大提高页面、图片加载速度<转>
    curl 超时设置<转>
    C++中map用法详解《转》
    同一台服务器配置多个tomcat服务的方法
    找出两个排好序的数组的中位数
    mysql中设置默认字符编码为utf-8
    大步小步攻击算法_完全版
    ACL登陆认证
  • 原文地址:https://www.cnblogs.com/shengnan-2017/p/10432501.html
Copyright © 2011-2022 走看看