87 lines
2.0 KiB
Vue
87 lines
2.0 KiB
Vue
<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>
|