Vue2.6 Vuex 与 ElementUI Form 实现双向绑定

vuex 开启严格模式，必须通过vuex的mutation修改state值；通过.sync(自定义组件)和v-model(输入组件)双向绑定实现不需要写很多的onChange去处理表单输入

store.js

export function getFormValue = () => ({
    date: ''，
    input: ''
})

const state = {
    formValue: getFormValue()
}

DataPicker.vue

<template>
  <el-date-picker
    v-model="innerValue"
    type="date"
    :placeholder="placeholder"
    format="yyyy-MM-dd"
    value-format="yyyy-MM-dd"
    :picker-options="pickerOpitons"
  />
</template>

<script>
export default {
  name: 'DatePickerSync',
  props: {
    value: {
      type: String,
      required: true
    },
    placeholder: {
      type: String,
      default: '请选择日期',
      required: false
    },
    pickerOpitons: {
      type: Object,
      default: () => { },
      required: false
    }
  },
  computed: {
    innerValue: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('update:value', value);
      }
    }
  }
};
</script>

form.vue

<template>
    <el-form>
        <el-form-item>
          <DatePickerSync
            :value.sync="formValue.date"
          />
        </el-form-item>
         <el-form-item>
          <el-input
            v-model="formValue.input"
          />
        </el-form-item>
    </el-form>
</template>

<script>
import { getFormValue } from './store.js'

export default {
    data() {
        formValue: getFormValue()
    },
    computed: {
        formValueFromState() {
           return this.$store.getters.store.formValue;
        }
    },
    watch: {
        formValueFromState(newVal) {
          this.formValue = cloneDeep(newVal);
        },
        // 需要监听整个formValue的属性变动，但是写法上简化很多
        formValue: {
          handler(newVal) {
            this.$store.commit(更新formValue的mutation)
          },
          deep: true
        },
    }
}
</script>