|
|
<cn>
|
|
|
#### 表单数据存储于 Vuex Store 中
|
|
|
通过使用 onFieldsChange 与 mapPropsToFields，可以把表单的数据存储到 Vuex 中。
|
|
|
**注意：**
|
|
|
`mapPropsToFields` 里面返回的表单域数据必须使用 `Form.createFormField` 包装。
|
|
|
</cn>
|
|
|
|
|
|
<us>
|
|
|
#### Store Form Data into Vuex Store
|
|
|
We can store form data into Vuex Store.
|
|
|
**Note:**
|
|
|
You must wrap field data with `Form.createFormField` in `mapPropsToFields`.
|
|
|
</us>
|
|
|
|
|
|
|
|
|
<template>
|
|
|
<div id="components-form-demo-vuex">
|
|
|
<a-form
|
|
|
:form="form"
|
|
|
@submit="handleSubmit"
|
|
|
>
|
|
|
<a-form-item label="Username">
|
|
|
<a-input
|
|
|
v-decorator="[
|
|
|
'username',
|
|
|
{
|
|
|
rules: [{ required: true, message: 'Username is required!' }],
|
|
|
}
|
|
|
]"
|
|
|
/>
|
|
|
</a-form-item>
|
|
|
<a-button
|
|
|
type="primary"
|
|
|
html-type="submit"
|
|
|
>
|
|
|
Submit
|
|
|
</a-button>
|
|
|
</a-form>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
computed: {
|
|
|
username () {
|
|
|
return this.$store.state.username;
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
username (val) {
|
|
|
console.log('this.$store.state.username: ', val);
|
|
|
this.form.setFieldsValue({username: val});
|
|
|
},
|
|
|
},
|
|
|
created () {
|
|
|
this.form = this.$form.createForm(this, {
|
|
|
onFieldsChange: (_, changedFields) => {
|
|
|
this.$emit('change', changedFields);
|
|
|
},
|
|
|
mapPropsToFields: () => {
|
|
|
return {
|
|
|
username: this.$form.createFormField({
|
|
|
value: this.username,
|
|
|
}),
|
|
|
};
|
|
|
},
|
|
|
onValuesChange: (_, values) =>{
|
|
|
console.log(values);
|
|
|
// Synchronize to vuex store in real time
|
|
|
// this.$store.commit('update', values)
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
handleSubmit (e) {
|
|
|
e.preventDefault();
|
|
|
this.form.validateFields((err, values) => {
|
|
|
if (!err) {
|
|
|
console.log('Received values of form: ', values);
|
|
|
this.$store.commit('update', values);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style>
|
|
|
#components-form-demo-vuex .language-bash {
|
|
|
max-width: 400px;
|
|
|
border-radius: 6px;
|
|
|
margin-top: 24px;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
