Vue 2.0 入门系列（13）用面向对象的概念去实现任务列表 (2)

本节将进一步将表单封装成类。首先，定义基本的类:

class Form {

    constructor(data) {
        this.originData = data;  //form.data.name

        for (let field in data) {
            this[field] = data[field];  // form.name
        }

        this.errors = new Errors();
    }

}

为了可以通过 form.name 的方式来访问字段，因此使用 for 循环来对属性进行赋值。

由于表单的数据以及错误消息现在都通过 form 实例来访问，因此其他地方也要对应作出修改。

onSubmit(){
    this.$http.post('/tasks',this.$data)
      .catch(error => this.form.errors.record(error.response.data));
},

视图部分也要响应作出更改:

<form method="POST" action="/tasks" @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)">

    <fieldset class="form-group">
        <label for="name">任务名</label>
        <input type="text" class="form-control" id="name" name="name" v-model="form.name">
        <small class="text-danger" v-if="form.errors.has('name')"  v-text="form.errors.get('name')"></small>
    </fieldset>

    <fieldset class="form-group">
        <label for="description">任务描述</label>
        <input type="text" class="form-control" id="description"  name="description" v-model="form.description">
        <small class="text-danger" v-if="form.errors.has('description')" v-text="form.errors.get('description')"></small>
    </fieldset>

    <button type="submit" class="btn btn-primary" :disabled="form.errors.any()">创建</button>
</form>

接下来将表单的其他请求都封装到 Form 中。完整的 Form 类如下

class Form {

    /**
     * 数据初始化
     */
    constructor(data) {
        this.originalData = data;  //form.data.name

        for (let field in data) {
            this[field] = data[field];  // form.name
        }

        this.errors = new Errors();
    }

    /**
     * 重置表单
     */
    reset(){
        for (let field in this.originalData) {
            this[field] = '';
        }

        this.errors.clear();
    }

    /**
     * 返回表单数据
     * @return {[type]} [description]
     */
    data(){

        let data = {};

        for (let property in this.originalData) {
            data[property] = this[property];
        }

        return data;
    }

    post(url) {
        return this.submit('post', url);
    }

    put(url) {
        return this.submit('put', url);
    }

    patch(url) {
        return this.submit('patch', url);
    }

    delete(url) {
        return this.submit('delete', url);
    }

    submit(requestType, url) {
        return new Promise((resolve, reject) => {
            axios[requestType](url, this.data())
                .then(response => {
                    this.onSuccess();
                    resolve(response.data);
                })
                .catch(error => {
                    this.onFail(error.response.data);
                    reject(error.response.data);
                });
        });
    }

    onSuccess(data) {
        this.reset();
    }

    onFail(errors) {
        this.errors.record(errors);
    }

}

使用

onSubmit(){
   this.form.post('/tasks')
           .then(message => alert(message))
           .catch(message => console.log(message));
}