说明
【Vue 开发实战】学习笔记。
效果
第一步：
第二步：填写密码提交
第三步：成功提示
添加 vuex
新建 ant-design-vue-pro\src\store\modules\form.js
import router from "@/router"; import request from "@/utils/request" import { message } from "ant-design-vue"; const state = { step: { payAccount: "kaimo313" } } const actions = { async submitStepForm({ commit }, { payload }) { console.log("submitStepForm--->", ...arguments) let res = await request({ url: "/api/form", method: "post", data: payload }); if(res.data && res.data.message === "OK") { console.log("res--->", res) commit("saveStepFormData", payload); router.push("/form/step-form/result"); message.success({ content: "提交成功" }); } } } const mutations = { saveStepFormData(state, { payload }) { state.step = { ...state.step, ...payload } } } export default { namespaced: true, state, actions, mutations }
然后 ant-design-vue-pro\src\store\index.js 使用这个模块
import Vue from "vue"; import Vuex from "vuex"; import form from "./modules/form"; Vue.use(Vuex); export default new Vuex.Store({ state: {}, mutations: {}, actions: {}, modules: { form, }, });
添加 mock form的提交接口
新建文件：ant-design-vue-pro\mock\form.js
function form(method) { let res = null; switch (method) { case "POST": res = { message: "OK" }; break; default: res = null; } return res; } module.exports = form;
Step1 组件
<template> <div> <a-form layout="horizontal" :form="form"> <a-form-item label="付款账号" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" > <a-input v-decorator="[ 'payAccount', { initialValue: step.payAccount, rules: [ { required: true, message: '请输入付款账号' } ] }, ]" placeholder="请输入付款账号" /> </a-form-item> <a-form-item> <a-button type="primary" @click="handleSubmit">下一步</a-button> </a-form-item> </a-form> </div> </template> <script> export default { data() { this.form = this.$form.createForm(this); return { formItemLayout:{ labelCol: { span: 4 }, wrapperCol: { span: 14 }, } }; }, computed: { step() { return this.$store.state.form.step } }, created() { console.log("this.$store---->", this.$store) }, methods: { handleSubmit() { const { form, $router, $store} = this; form.validateFields((err, values) => { console.log(err, values) if(!err) { console.log(values); $store.commit({ type: "form/saveStepFormData", payload: values }); $router.push("/form/step-form/confirm"); } }) } }, }; </script> <style></style>
Step2 组件
<template> <div> <a-form layout="horizontal" :form="form"> <a-form-item label="付款账号" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" > {{step.payAccount}} </a-form-item> <a-form-item label="账号密码" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" > <a-input v-decorator="[ 'password', { initialValue: password, rules: [ { required: true, message: '请输入账号密码' } ] }, ]" type="password" placeholder="请输入账号密码" /> </a-form-item> <a-form-item> <a-button @click="goPrev" style="margin-right: 10px;">上一步</a-button> <a-button type="primary" @click="handleSubmit">提交</a-button> </a-form-item> </a-form> </div> </template> <script> export default { data() { this.form = this.$form.createForm(this); return { password: "", formItemLayout:{ labelCol: { span: 4 }, wrapperCol: { span: 14 }, } }; }, computed: { step() { return this.$store.state.form.step } }, created() { console.log("this.$store---->", this.$store) }, methods: { goPrev() { this.$router.push("/form/step-form/info"); }, handleSubmit() { const { form, $store, step } = this; form.validateFields((err, values) => { console.log(err, values) if(!err) { console.log(values); // 以载荷形式分发 $store.dispatch("form/submitStepForm", { payload: { ...step, ...values } }); // 以对象形式分发 // $store.dispatch({ // type: "form/submitStepForm", // payload: { ...step, ...values } // }); } }) } }, }; </script> <style></style>
Step3 组件
<template> <div>操作成功，预计两个小时到账。</div> </template> <script> export default {}; </script> <style></style>
