Cara Membuat Aplikasi Vue To-Do Dengan Penyimpanan Lokal

Cara Membuat Aplikasi Vue To-Do Dengan Penyimpanan Lokal
Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

LocalStorage adalah API web, yang terpasang di browser, yang memungkinkan aplikasi web menyimpan pasangan nilai kunci di perangkat lokal Anda. Ini memberikan metode sederhana untuk menyimpan data, bahkan setelah Anda menutup browser Anda.





cara mengubah akun google default saya
Video MUO hari ini GULIR UNTUK MELANJUTKAN ISI

Anda dapat mengintegrasikan LocalStorage dengan aplikasi Vue Anda untuk menyimpan daftar dan data berukuran kecil lainnya. Hal ini memungkinkan Anda menyimpan data pengguna di berbagai sesi aplikasi.



Setelah tutorial ini, Anda akan memiliki aplikasi tugas Vue yang fungsional yang dapat menambah dan menghapus tugas, menyimpan data menggunakan LocalStorage.





Menyiapkan Aplikasi Vue To-Do

Sebelum Anda mulai membuat kode, pastikan Anda sudah memilikinya menginstal Node dan NPM di perangkat Anda .

Untuk membuat proyek baru, jalankan perintah npm ini:



npm create vue

Perintah ini mengharuskan Anda memilih preset untuk aplikasi Vue baru Anda sebelum membuat dan menginstal dependensi yang diperlukan.

Anda tidak memerlukan fitur tambahan untuk aplikasi agenda ini, jadi pilih 'Tidak' untuk semua preset yang tersedia.



Baris perintah yang menunjukkan proses pembuatan aplikasi Vue baru

Setelah proyek disiapkan, Anda dapat mulai membuat aplikasi agenda dengan LocalStorage.

Membuat Aplikasi Agenda

Untuk tutorial ini, Anda akan membuat dua komponen Vue: App.vue untuk keseluruhan struktur dan Todo.vue untuk menampilkan daftar tugas.



Membuat Komponen Agenda

Untuk komponen Todo, buat file baru, src/components/Todo.vue . File ini akan menangani struktur daftar tugas.

Rekatkan kode berikut ke dalam Todo.vue mengajukan:

<!-- Todo.vue --> 
<script setup> 
const props = defineProps(['todos']); 
const emit = defineEmits(['remove-todo']); 
 
const removeTodo = (index) => { 
  emit('remove-todo', index); 
}; 
</script> 
 
<template> 
  <div class="todo-list"> 
    <ul> 
      <li v-for="(todo, index) in props.todos" :key="index" class="todo-item"> 
        {{ todo.text }} 
        <button @click="removeTodo(index)" class="remove-button"> 
          Remove 
        </button> 
      </li> 
    </ul> 
  </div> 
</template>

Cuplikan kode di atas merinci strukturnya Semua komponen. Ini menyiapkan komponen untuk menerima data dan memancarkan peristiwa masing-masing melalui penggunaan props dan peristiwa khusus.

Untuk menjelaskan lebih lanjut, kode tersebut digunakan Props Vue untuk komunikasi antar komponen untuk menerima semua array dari komponen induknya, app.vue . Ia kemudian menggunakan direktif v-for untuk merender daftar untuk mengulangi array todos yang diterima.

Kode ini juga memunculkan peristiwa khusus, Hapus semua , dengan muatan indeks . Hal ini memungkinkan Anda untuk menghapus tugas tertentu dengan indeks tertentu dalam array todos.

Saat mengklik Menghapus tombol, cuplikan memicu emisi peristiwa khusus ke komponen induk. Ini menunjukkan bahwa Anda telah mengklik tombol tersebut, yang meminta eksekusi fungsi terkait yang ditentukan dalam komponen induk, App.vue.

Membuat Komponen Tampilan Aplikasi

Pergilah ke app.vue untuk terus membangun aplikasi Todo. Itu Aplikasi komponen akan menangani penambahan tugas baru dan merender Semua komponen.

Rekatkan yang berikut ini naskah blok ke dalam file App.vue Anda:

<!-- App.vue --> 
<script setup> 
import Todo from "./components/Todo.Vue"; 
import { ref } from "vue"; 
 
const newTodo = ref(""); 
const todos = ref([]); 
 
const addTodo = () => { 
  if (newTodo.value.trim() === "") return; 
  todos.value.push({ text: newTodo.value }); 
  newTodo.value = ""; 
  saveToLocalStorage(); 
}; 
 
const removeTodo = (key) => { 
  todos.value.splice(key, 1); 
  saveToLocalStorage(); 
}; 
 
const saveToLocalStorage = () => { 
  localStorage.setItem("todos", JSON.stringify(todos.value)); 
}; 
 
const savedTodos = localStorage.getItem("todos"); 
 
if (savedTodos) { 
  todos.value.push(...JSON.parse(savedTodos)); 
} 
</script>

Cuplikan kode di atas menguraikan logikanya app.vue komponen. Cuplikan mengimpor Semua komponen dan menginisialisasi variabel reaktif dengan Vue Composition API.

Kode dimulai dengan impor komponen Todo dan referensi fungsi dari jalur yang ditentukan dan melihat , masing-masing.

Cuplikan kemudian menginisialisasi string reaktif, Todo baru , untuk menyimpan tugas yang akan Anda masukkan. Ini juga menginisialisasi reaktif kosong semua array, memegang daftar tugas.

Itu tambahkanTodo fungsi menambahkan tugas baru ke array todos. Jika newTodo tidak kosong, maka akan dimasukkan ke dalam array pada konfirmasi dan menyetel ulang nilai newTodo agar Anda dapat menambahkan lebih banyak tugas.

Fungsi addTodo juga memanggil simpanToLocalStorage, yang menyimpan array todos ke Penyimpanan Lokal browser. Cuplikan menggunakan setItem metode untuk mencapai ini dan mengubah array todos menjadi string JSON sebelum disimpan.

Ini juga mendefinisikan a hapusTodo fungsi yang memerlukan a kunci sebagai parameter. Ia menggunakan kunci ini untuk menghapus yang sesuai semua dari susunan todos. Setelah penghapusan, fungsi deleteTodo memanggil saveToLocalStorage untuk memperbarui data LocalStorage.

Terakhir, kode tersebut menggunakan dapatkanItem metode yang tersedia untuk LocalStorage untuk mengambil tugas yang disimpan sebelumnya dengan kunci todos. Jika Anda telah menyimpan tugas di Penyimpanan Lokal browser, kode akan memasukkannya ke dalam array tugas.

Sekarang Anda telah menangani logika komponen App.vue, tempelkan kode berikut di templat blok aplikasi Vue Anda untuk membuat antarmuka pengguna:

<!-- App.vue --> 
<template> 
  <div class="app"> 
    <h1>To do List</h1> 
    <div class="add-todo"> 
      <input v-model="newTodo" @keyup.enter="addTodo" 
        placeholder="Add a new task" class="todo-input" /> 
 
      <button @click="addTodo" class="add-button">Add</button> 
    </div> 
    <Todo :todos="todos" @remove-todo="removeTodo" /> 
  </div> 
</template>

Templatnya menggunakan v-model , metode pengikatan data di Vue untuk mengikat tugas yang dimasukkan ke Todo baru string reaktif. Templatnya juga menggunakan v-on arahan untuk menangani event di Vue melalui singkatannya ( @ ).

jam tangan apel stainless steel vs aluminium 2

Ia menggunakan v-on untuk mendengarkan keduanya klik Dan memasuki peristiwa penting untuk mengonfirmasi Todo baru.

Terakhir, template menggunakan Semua komponen yang Anda buat terlebih dahulu untuk merender daftar tugas. Itu :semua sintaks melewati semua array sebagai penyangga komponen Todo.

Itu @ hapus-semuanya sintaks menyiapkan pendengar acara untuk menangkap acara khusus yang dipancarkan komponen Todo dan memanggil hapusTodo berfungsi sebagai respons.

Sekarang Anda telah menyelesaikan aplikasinya, Anda dapat memilih gaya sesuai selera Anda. Anda dapat melihat pratinjau aplikasi Anda dengan menjalankan perintah ini:

npm run dev

Anda akan melihat layar seperti ini:

Aplikasi Todo dasar dengan kotak masukan untuk menambahkan tugas baru dan daftar lima tugas yang ada

Anda dapat menambah atau menghapus tugas dalam aplikasi Todo. Terlebih lagi, berkat integrasi LocalStorage, Anda dapat menyegarkan aplikasi atau keluar sepenuhnya; daftar tugas yang Anda pilih akan tetap utuh.

Pentingnya Penyimpanan Lokal

Integrasi LocalStorage dalam aplikasi web sangat penting bagi pengembang pemula dan berpengalaman. LocalStorage memperkenalkan persistensi data kepada pemula dengan memungkinkan mereka menyimpan dan mengambil konten buatan pengguna.

Penyimpanan Lokal penting karena Anda dapat memastikan data pengguna Anda tetap utuh di berbagai sesi. LocalStorage menghilangkan kebutuhan akan komunikasi server yang konstan, sehingga mempercepat waktu muat dan meningkatkan respons dalam aplikasi web.