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

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



     
  • 相关阅读:
    as2 loadvars
    Playing with Content-Type – XXE on JSON Endpoints
    Hostile Subdomain Takeover using HerokuGithubDesk + more
    XSS for domain takeover
    XSS via XML POST
    dns 查询中的ANY类型
    crossDomain、allowDomain()、allowScriptAccess三者的关系
    ReadingWriting files with MSSQL's OPENROWSET
    Github html文件在线预览方法
    boostrap莫泰对话框宽度调整
  • 原文地址:https://www.cnblogs.com/shengnan-2017/p/10432501.html
Copyright © 2011-2022 走看看