Latihan 2 dari materi Pinia Lanjutan di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Lengkapi store todo gaya options. Kode awal sudah punya useTodoStore dengan state berisi dua todo, const store = useTodoStore(), <p id="total"> yang membaca store.total, dan tombol #reset yang memanggil store.$reset(). Biarkan semuanya.
getters: { total: (state) => state.todos.length }.actions: { removeTodo(index) { this.todos.splice(index, 1) } }.<ul id="todos">, buat satu <li> per todo: <li v-for="(todo, i) in store.todos" :key="todo">{{ todo }} <button @click="store.removeTodo(i)">×</button></li>.$reset() mengembalikan state ke isi awal dari fungsi state. Di store gaya options, Pinia menyediakannya sendiri.
Yang dicek:
#todos ada, punya minimal 2 <li> yang memuat Belajar Vue dan Belajar Pinia, dan tiap <li> punya tombol.#total berbunyi 2 todo di awal.<li> pertama diklik, <li> pertama memuat Belajar Pinia dan #total jadi 1 todo.#reset diklik, #total kembali 2 todo.getters: dan actions:.
