Viết component gọn gàng hơn với Computed Setter

Một trong những khái niệm quan trọng của Vue là computed property.

data() {
    return {
        firstName:  'John',
        lastName: 'Doe'
    }
},
computed: {
    fullName () {
        return `${this.firstName} ${this.lastName}`;
    }
}

fullName được gọi là một computed getter. Chúng ta có thể khai báo một cách đầy đủ hơn

computed: {
    fullName: {
        get() {
            return `${this.firstName} ${this.lastName}`;
        },
        set(fullName) {
            this.firstName = fullName.split(' ')[0];
            this.lastName = fullName.split(' ')[1];
        }
    }
}

Từ giờ, khi chúng ta đặt lại giá trị fullName ( this.fullName = 'Example'), 2 giá trị firstNamelastName sẽ cập nhập theo.

Giờ lấy ví dụ sử dụng thực tế hơn với Vuex. Chúng ta lấy một số dữ liệu từ store để sử dụng trong component. Nếu ko dùng computed setter, chúng ta sẽ viết như sau

<template>
    <div>
        <input
            :value="text"
            type="text"
            @input="onInput"
        />
        <button @click="convertToUpperCase">To UpperCase</button
    </div>
</template>

<script>
export default {
    props: ['text'],
    methods: {
        onInput (e) {
            this.$store.dispatch('CHANGE_TEXT', e.target.value);
        },
        convertToUpperCase() {
            this.$store.dispatch('CHANGE_TEXT', this.text.toUpperCase())
        }
    }
}
</script>

Dùng Computed Setter sẽ gọn gàng hơn.

<template>
    <div>
        <input
            v-model="textValue"
            type="text"
        />
        <button @click="convertToUpperCase">To UpperCase</button
    </div>
</template>

<script>
export default {
    props: ['text'],
    computed: {
        textValue: {
            get () {
                return this.text;
            },
            set (value) {
                this.$store.dispatch('CHANGE_TEXT', value);
            }
        }
    },
    methods: {
        convertToUpperCase() {
            this.textValue = this.textValue.toUpperCase()
        }
    }
}
</script>
  1. Update dữ liệu bên ngoài component đơn giản hơn. Thay thế :value, @input, bằng v-model. Thay đổi giá trị cũng đơn giản hơn, như trong hàm convertToUpperCase
  2. Chúng ta chỉ gọi dispatch ở một chổ duy nhất khi cần thay đổi giá trị

Simplify Your Vue Components with Computed Setters