Latihan 1 dari materi Pinia Lanjutan di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Pakai store todo dari komponen utama. Kode awal sudah punya useTodoStore (state todos dan action addTodo), komponen Jumlah yang menampilkan banyaknya todo dari store yang sama di #total, dan const input = ref("").
const store = useTodoStore().todos lewat storeToRefs, supaya tetap reaktif setelah dibongkar: const { todos } = storeToRefs(store). Action diambil langsung: const { addTodo } = store.tambah(): kalau input.value.trim() gak kosong, panggil addTodo(input.value.trim()), lalu kosongkan input.value = "".<input id="input" v-model="input" />, <button id="add" @click="tambah">Tambah</button>, dan <ul id="list"> berisi <li v-for="(todo, i) in todos" :key="i">{{ todo }}</li>. Biarkan <component :is="Jumlah" />.Yang dicek:
#input, #add, dan #list ada.Belajar Pinia diketik lalu #add diklik, #list memuat Belajar Pinia, #input kosong lagi, dan #total berbunyi 1 todo.storeToRefs(, v-model, v-for, dan @click.
