Vue.js реактивность и Object.defineProperty с TypeScript - PullRequest
Новая
       36

Vue.js реактивность и Object.defineProperty с TypeScript

0 голосов
/ 03 июля 2019

Я создаю класс в TypeScript для обработки отправки формы и ошибок сервера: 

export default class Form<Model> {
    private readonly original: Model
    private changes: Partial<Model>

    constructor(data: Model) {
        this.original = data
        Object.keys(this.original).forEach(key => this.initialiseData(key))
    }

    private initialiseData(key) {
        Object.defineProperty(this, key, {
            get: () => this.data[key],
            set: (value) => this.changes[key] = value
        }
    }

    get data(): Model {
        return Object.assign({}, this.original, this.changes)
    }

    post(url: string) {
        // post logic
    }
}

Это будет использоваться в моих компонентах Vue следующим образом: 

import { Component, Vue } from 'vue-property-decorator'
import Form from '~/src/vform'

interface LoginForm {
    email: string
    password: string
}

@Component
export default class LoginView extends Vue {
    form: Form<LoginForm> = new Form<LoginForm>({
        email: '',
        password: ''
    })

    async submit() {
        await this.form.post('/auth/login')
    }
}

Это работает, функционально, я могу заполнить форму и отправить данные на сервер. У меня проблема с реактивностью в Vue.js. Поскольку свойства не существуют в классе Form, данные не передаются в v-model, они обновляются внутри формы только после их изменения.

Это не проблема, если я не отображаю данные на экране из формы. Сейчас я могу с этим смириться, но мне было интересно, был ли способ заставить Vue распознавать реактивные свойства в моем классе Form, или был ли лучший способ достичь этой функциональности без ущерба для системы типов.

...