Latihan 1: Pinia Dasar — Vue

Latihan 1 dari materi Pinia Dasar di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Lengkapi store Pinia pertamamu. Kode awal sudah punya useCounterStore (dibuat dengan defineStore("counter", ...)) yang baru berisi state count, dan dua komponen yang sama-sama memakainya: Tampilan menampilkan #count dan #double, Tombol punya #inc. Biarkan kedua komponen itu.

Di dalam store, tambahkan getter const doubleCount = computed(() => count.value * 2).
Tambahkan action function increment() { count.value++ }.
Kembalikan ketiganya: return { count, doubleCount, increment }.

Tombolnya ada di komponen yang berbeda dari angkanya. Angkanya ikut berubah karena keduanya memakai store yang sama.

Yang dicek:

Sebelum diklik, #count dan #double berisi 0.
Setelah #inc diklik sekali, #count berisi 1 dan #double berisi 2.
Dari awal lagi, setelah #inc diklik dua kali, #double berisi 4.
Kodenya memakai defineStore(, computed(, dan perkalian dengan 2.

Hint

Store gaya setup ditulis seperti setup komponen: ref jadi state, computed jadi getter, fungsi jadi action. Yang dikembalikan store itulah yang bisa dipakai komponen.
Di dalam fungsi defineStore: const doubleCount = computed(() => count.value * 2), lalu function increment() { count.value++ }, dan return { count, doubleCount, increment }.
const doubleCount = computed(() => count.value * 2) function increment() { count.value++ } return { count, doubleCount, increment }

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Pinia Dasar — Vue

Hint

Memperbarui Aplikasi