Data atau state di Vue JS merupakan sebuah tempat yang digunakan menyimpan data. Data yang dimaksud ini seperti data variable baik itu const atau let. Pada contoh-contoh sebelumnya kita selalu menyimpan data menggunakan ref, misalnya let title = ref(“Judul Halaman”). Kenapa kita tidak menggunakan let title = “Judul Halaman” saja? Nah, mari kita bahas.
Penggunaan ref itu disebut dengan Reactive State (selanjutnya kita sebut State saja). Kelebihan dari menggunakan state adalah component akan di-render ulang setiap kali ada perubahan state. Jika kita tidak menggunakan state, maka component tidak akan di-render ulang. Untuk lebih jelasnya, cobalah buat component vue seperti ini.
<script setup lang="ts">
let counter: number = 0;
function increament() {
value += 1;
console.info(`value is: ${value}`);
}
</script>
<template>
<div>Value is: {{value}}</div>
<button @click="increament">Increment</button>
</template>
<style scoped>
</style>Dari contoh di atas, jika kita klik tombol increment maka variable counter sebenarnya berubah. Tapi tampilannya tidak berubah. Fenomena tersebut terjadi karena variable diubah tapi componentnya tidak di-render ulang. Berikut ini gambarnya.
Gambar di atas jelas ya. Di console counternya sudah 5 tapi pada webnya tetap menampilkan 0. Oleh karena itu, kita harus menggunakan state agar component pada web tersebut di render ulang.
Cara Menggunakan State di Vue JS
Cara menggunakan state ini cukup mudah. Pertama kita harus import dulu dengan import {ref} from “vue”. Selanjutnya kita set variable yang kita inginkan dengan function ref. Contohnya const counter = ref(0). Sebenarnya fungsi ref ini akan mengembalikan object yang cukup kompleks. Aku rasa kita tidak perlu melihat seberapa kompleks object tersebut. Kita cukup tahu bahwa pada object itu terdapat attribute value yang sudah dilengkapi dengan setter dan getter. Jadi kita bisa memodifikasi state dengan cara mengakses value. Kalau nama statenya counter, untuk merubahanya menggunakan counter.value = 2. Untuk lebih jelasnya, perhatikan hasil modifikasi contoh di atas berikut ini.
<script setup lang="ts">
import {ref} from "vue";
let counter = ref(0);
console.info(counter);
function increment() {
counter.value += 1;
console.info(`counter is: ${counter.value}`);
}
</script>
<template>
<div>Counter is: {{counter}}</div>
<button @click="increment">Increment</button>
</template>
<style scoped>
</style>Dengan contoh di atas maka value pada halaman web akan berubah saat kita klik tombol increment. Perlu diperhatikan, jika kita memanggil value menggunakan mustache di template, kita tidak perlu menggunakan counter.value, kita cukup menggunakan value saja.
State di Vue JS dapat menerima data apa saja, bisa string, number atau object. Jika yang kita masukkan berupa object, cara mengkasesnya nanti adalah nama_state.value.nama_attribute_object.
Reactive State
Pada contoh sebelumnya, kita membuat state menggunakan function ref. Namun, kita bisa melihat ketika kita menggunakan ref terhadap object, kita harus menulis nama_state.value.nama_attribute_object untuk mendapatkan attribute dari object. Cara ini lumayan cukup panjang, tapi tenang saja, lagi-lagi Vue sudah memikirkan itu. Kita bisa membuat state menggunakan function reactive. Sehingga balikannya merupakan object dan kita bisa memanggil dengan cara nama_state.nama_attribute_object. Mari kita lihat contoh berikut ini.
<script setup lang="ts">
import {reactive} from "vue";
class Person {
constructor(
public firstName: string,
public lastName: string,
public department: string
) {
}
}
const person = reactive(new Person("Ardhan", "Rahmanu", "Pusat TIK"));
</script>
<template>
<table>
<tr v-for="(value, key) in person">
<td>{{key}}</td>
<td>:</td>
<td>{{value}}</td>
</tr>
</table>
</template>
<style scoped>
</style>Dari contoh di atas kita bisa melihat bahwa kita bisa melakukan iterasi object menggunakan key dan value. Jadi jika type data yang kita gunakan adalah object, lebih baik kita menggunakan reactive. Sedangkan jika type datanya sederhana seperti number atau string, kita harus menggunakan ref. Kenapa harus? karena reactive hanya menerima parameter berupa object.
Next Tick
Proses render ulang pada Vue sebenarnya tidak dilakukan secara langsung. Misalkan kita punya beberapa state dan masing-masing state dilakukan perubahan maka tidak serta merta componentnya di render. Vue memiliki jadwal untuk melakukan render ulang component. Jadwal tersebut dinamakan dengan nextTick. Mari kita lihat contoh berikut ini.
async function increment() {
counter.value += 1;
console.info(`counter is: ${counter.value}`);
await nextTick();
counter.value += 1;
console.info(`counter is: ${counter.value}`);
await nextTick();
counter.value += 1;
console.info(`counter is: ${counter.value}`);
await nextTick();
}Pada contoh di atas, setiap kali kita menambahkan counter dengan 1, kita tambahkan await nextTick(). Dengan begitu, penambahan counter berikutnya akan menunggu dulu sampai component di render ulang. Setelah component di render ulang, barulah penambahan counter dilakukan lagi. Sayangnya kita tidak bisa melihat prosesnya dengan jelas karena nextTick itu sangat cepat. Jika nextTick bisa diperlambat kita akan bisa melihat di browser kita akan menampilan 1 kemudian 2 lalu 3. Tanpa await nextTick, browser akan langsung menampilkan 3.
Nah, demikianlah sedikit penjelasan tentang state di Vue JS. Saat menggunakan vue, kita tidak disarankan untuk menggunakan variable seperti contoh pertama. Jika memang variable tersebut harus ditampilkan di template, kita wajib menggunakan state. Semoga penjelasan ini bermanfaat. Terima kasih dan sampai bertemu di materi Vue selanjutnya.
