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ị firstName và lastName 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>- Update dữ liệu bên ngoài component đơn giản hơn. Thay thế
:value,@input, bằngv-model. Thay đổi giá trị cũng đơn giản hơn, như trong hàmconvertToUpperCase - Chúng ta chỉ gọi
dispatchở một chổ duy nhất khi cần thay đổi giá trị
Initializing...