element-ui form 组件中v-model与vuex如何结合使用？

Question

vuex文档中建议表单中v-model这样使用：

<input v-model="user">

computed: {
  user: {
    get () {
      return this.$store.state.obj.user
    },
    set (value) {
      this.$store.commit('updateUser, value)
    }
  }
}

但是：
element-ui如果要使用form组件的表单验证功能，表单v-model绑定的data必须写在一个对象里面,如下的formline，也就是说它只验证formline对象内部的属性值，以下element-ui文档的demo代码:

vue无法把一个计算属性写在一个对象（比如formline）里面，即不可以使用如下这样的语法：

computed: {
   // 错误代码
  'formline.user': {
    get () {
      return this.$store.state.obj.user
    },
    set (value) {
      this.$store.commit('updateUser', value)
    }
  }
}

我现在的做法是每次set操作commit后往formline对象中添加对应的key&value，这样才可以使用element-ui的form验证功能，代码如下 ：

computed: {
  'user': {
    get () {
      return this.$store.state.obj.user
    },
    set (value) {
      this.$store.commit('updateUser', value)
      // 添加如下：
      this.formline.user = value
    }
  }
}

但总感觉有点歪门邪道，不知道有其他更合理的解决方案？

Answer 1

我的解决思路是从store拷贝一份数据给组件。
组件每次数据更新，又拷贝一份给store。这样，组件和store的数据就是同步的。

从store拷贝一份数据给组件

data:function (){
        return {
            form:_.cloneDeep(this.$store.state.picker.form),
        }
    }

然后监听数据的变化

watch:{


        form:{
            handler:function(a, b){
                console.log('改变了', a, b);
                console.log(a);
                this.$store.commit('picker/setForm', {
                    form:_.cloneDeep(a),
                });
            },
            deep:true
        },

    },

每次更新，都提交到store。