基于Vuex的树形控件

Posted 2020-10-08

用vue也有一小段时间了，最近刚好写到一个树形控件，脑补了下怎么设计数据结构，结果vuex的双向绑定让我瞬间痴汉了

代码在这里http://jsfiddle.net/osyo/2cm2bLdf/

 

思路也挺简单的，就是把当前元素所在的对象作为参数传入方法中直接修改

emmm，这里要注意一点，如下

state: {
    all: {
        name: ‘0‘, 
        list: [
            { name: ‘0-0‘, content: ‘some text‘ }
        ]
    },
    formData: {
        group: {
            name: ‘‘,
            list: []
        },
        item: {
            name: ‘‘,
            content: ‘‘
        }
    }
}

根据新增的内容时组还是单个对象来往list中push元素，如果直接使用或者只是简单的浅拷贝，会导致新增的item使用同一个content，当某个item值有修改时，所有item值都会被修改...

大概就这些...