Vue+Vuex+Element-UI表单验证错误提示解决

v-Model

element中表单使用v-model绑定form，加上vuex再使用v-model会触发严格模式，从而报错。更改form的值，例如

<el-form ref="form" v-model="form" :rules="rules"  label-width="80px">
      <el-form-item label="旧密码" prop="oldPass" >
        <el-input type="password" class="input" v-model="form.oldPass" auto-complete="off"></el-input>
      </el-form-item>
</el-form>

这种使用属性值，form.oldPass这种系列的，写get，set方法貌似也没用。使用vuex-map-fields可以解决v-model的问题（不知道vuex-map-fields自行百度）,但是需要写成

<el-form ref="form" v-model="form" :rules="rules"  label-width="80px">
      <el-form-item label="旧密码" prop="oldPass" >
        <el-input type="password" class="input" v-model="oldPass" auto-complete="off"></el-input>
      </el-form-item>
</el-form>

绑定属性变成了oldPass，而且form的属性值需要单列出来

...vh.mapFields('path',['form','form.oldPass','form.pass','form.checkPass','rules'])

这里的改良方式还没想到，有想到的伙伴可以评论区留言批评指正。

Rules

这里在使用Element的表单验证prop就会报错，原因我猜想是Element没有获取到form内部值，写自定义报错方法时获取到的value也是undefined，因为时间关系，只看了element里面的部分代码，这里请自行研究。
因为我将data里的数据都放在了vuex的state，目前我的解决方式是写自定义表单验证函数。

oldsPass: [
            {validator: function(a, b, c,d,e){
                var val = state.form[a.field]
                
            }, trigger: 'blur'}
        ],

validator会有五个参数传过来，a是rule的本体对象

b为input的value值

c为callback（）函数

d是a的field对象

e是这个玩意

这里的对象跟form表单内的属性没有关系

权宜之计

这里我用了rule的field来做标识，通过state的值来进行判断

终究感觉不是很舒适，等以后有机会再想新的方法吧