vue实现可视化可拖放的自定义表单（代码示例）(2)-木庄网络博客

拖放组件使用vuedraggable,拖放完成的时候，鉴于MVVM的特点，画面改变<=>数据改变，操作vuex时注意不能直接修改state

computed: {
    myList: {
        get() {
            return this.$store.state.myList
        },
        set(value) {
            this.$store.commit('updateList', value)
        }
    }
}

整个数据流向：左栏组件库<-->中间展示栏 <---->右栏属性设置, 控制不好数据的话，可能会出现原始数据被修改的情况。请看：

var a = { k: 1 }
var b = a
b.k = 2
console.log(a) // { k: 2 }

这就会无意间导致数据被修改，很难排查。可以使用Object.freeze冻结对象，避免出错。

Object.freeze

function deepFreeze(obj) {
 
  // 取回定义在obj上的属性名
  var propNames = Object.getOwnPropertyNames(obj);
 
  // 在冻结自身之前冻结属性
  propNames.forEach(function(name) {
    var prop = obj[name];
 
    // 如果prop是个对象，冻结它
    if (typeof prop == 'object' && prop !== null)
      deepFreeze(prop);
  });
 
  // 冻结自身(no-op if already frozen)
  return Object.freeze(obj);
}