docs: add form vuex demo close #465

Author: tangjinzhou

components/form/__tests__/demo.test.js

@@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('form', { suffix: 'vue', skip: ['index.vue'] });
+demoTest('form', { suffix: 'vue', skip: ['index.vue', 'vuex.vue'] });

components/form/demo/index.vue

@@ -13,6 +13,8 @@ import FormInModal from './form-in-modal';
 import FormInModalString from '!raw-loader!./form-in-modal';
 import GlobalState from './global-state';
 import GlobalStateString from '!raw-loader!./global-state';
+import VuexState from './vuex';
+import VuexStateString from '!raw-loader!./vuex';
 import HorizontalLogin from './horizontal-login';
 import HorizontalLoginString from '!raw-loader!./horizontal-login';
 import Layout from './layout';
@@ -130,6 +132,9 @@ export default {
         <demo-container code={GlobalStateString}>
           <GlobalState />
         </demo-container>
+        <demo-container code={VuexStateString}>
+          <VuexState />
+        </demo-container>
         <demo-container code={NormalLoginString}>
           <NormalLogin />
         </demo-container>

components/form/demo/vuex.vue

@@ -0,0 +1,98 @@
+<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>
+
+
+
+
+

package.json

@@ -165,6 +165,7 @@
     "vue-server-renderer": "^2.5.16",
     "vue-template-compiler": "^2.5.16",
     "vue-virtual-scroller": "^0.12.0",
+    "vuex": "^3.1.0",
     "webpack": "^4.28.4",
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.1.14",

site/index.js

@@ -4,6 +4,7 @@ import './index.less';
 import 'nprogress/nprogress.css';
 import 'highlight.js/styles/solarized-light.css';
 import Vue from 'vue';
+import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
 import VueRouter from 'vue-router';
 import VueClipboard from 'vue-clipboard2';
@@ -28,6 +29,7 @@ const mountedCallback = {
   },
 };
 
+Vue.use(Vuex);
 Vue.use(mountedCallback);
 Vue.use(VueClipboard);
 Vue.use(VueRouter);
@@ -56,8 +58,21 @@ router.beforeEach((to, from, next) => {
   }
   next();
 });
+
+const store = new Vuex.Store({
+  state: {
+    username: 'zeka',
+  },
+  mutations: {
+    update(state, payload) {
+      state.username = payload.username;
+    },
+  },
+});
+
 new Vue({
   el: '#app',
   i18n,
   router,
+  store,
 });