Latihan 2: Pinia Dasar — Vue

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

Buat store keranjang sendiri. Kode awal sudah punya dua komponen yang memakai useCartStore(): Ringkasan menampilkan #cart dan #empty, TombolTambah punya #add. Store-nya belum ada. Biarkan kedua komponen itu.

Buat const useCartStore = defineStore("cart", () => { ... }).
Di dalamnya: state const items = ref(0), getter const isEmpty = computed(() => (items.value === 0 ? "Ya" : "Tidak")), dan action function addItem() { items.value++ }.
Kembalikan ketiganya: return { items, isEmpty, addItem }.

Yang dicek:

Sebelum diklik, #cart berisi 0 dan #empty berisi Ya.
Setelah #add diklik sekali, #empty berisi Tidak dan #cart berisi 1.
Kodenya memakai defineStore("cart" dan getter (computed( atau getters:).

Hint

Kedua komponen memanggil useCartStore(), jadi store itu harus ada lebih dulu. Store-nya berisi state, getter yang diturunkan dari state, dan action yang mengubah state.
const useCartStore = defineStore("cart", () => { const items = ref(0); const isEmpty = computed(...); function addItem() { ... }; return { items, isEmpty, addItem } })
const isEmpty = computed(() => (items.value === 0 ? "Ya" : "Tidak")) function addItem() { items.value++ }

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Pinia Dasar — Vue

Hint

Memperbarui Aplikasi