كيفية إنشاء تطبيق Vue To-Do باستخدام LocalStorage

LocalStorage عبارة عن واجهة برمجة تطبيقات ويب، مدمجة في المتصفحات، تتيح لتطبيقات الويب تخزين أزواج القيمة الرئيسية على جهازك المحلي. فهو يوفر طريقة بسيطة لتخزين البيانات، حتى بعد إغلاق المتصفح.

يمكنك دمج LocalStorage مع تطبيقات Vue الخاصة بك لتخزين القوائم والبيانات الصغيرة الأخرى. يتيح لك هذا الاحتفاظ ببيانات المستخدم عبر جلسات التطبيق المختلفة.

بعد هذا البرنامج التعليمي، سيكون لديك تطبيق Vue to-do فعال يمكنه إضافة المهام وإزالتها، وتخزين البيانات باستخدام LocalStorage.

إعداد تطبيق Vue To-Do

قبل أن تبدأ بالبرمجة، تأكد من أن لديك تثبيت Node وNPM على جهازك.

لإنشاء مشروع جديد، قم بتشغيل أمر npm التالي:

npm create vue 

سيطلب منك الأمر تحديد إعداد مسبق لتطبيق Vue الجديد الخاص بك قبل إنشاء التبعيات الضرورية وتثبيتها.

لن تحتاج إلى ميزات إضافية لتطبيق المهام هذا، لذا اختر "لا" لجميع الإعدادات المسبقة المتاحة.

بعد إعداد المشروع، يمكنك البدء في إنشاء تطبيق المهام باستخدام LocalStorage.

إنشاء تطبيق المهام

في هذا البرنامج التعليمي، ستقوم بإنشاء مكونين من مكونات Vue: App.vue للهيكل العام وTodo.vue لعرض قائمة المهام.

إنشاء مكون المهام

بالنسبة لمكون Todo، قم بإنشاء ملف جديد، src/components/Todo.vue. سيتعامل هذا الملف مع بنية قائمة المهام.

الصق الكود التالي في Todo.vue ملف:

<scriptsetup>
const props = defineProps(['todos']);
const emit = defineEmits(['remove-todo']);
const removeTodo = (index) => {
 emit('remove-todo', index);
};
script>
<template>
<divclass="todo-list">
<ul>
<liv-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>

يوضح مقتطف الكود أعلاه تفاصيل بنية الملف لكى يفعل عنصر. يقوم بإعداد المكون لتلقي البيانات وإصدار الأحداث من خلال استخدام الدعائم والأحداث المخصصة، على التوالي.

لمزيد من التوضيح، يستخدم الكود الدعائم Vue للتواصل بين المكونات لتلقي جميع المهام مصفوفة من مكونها الأصلي، App.vue. ومن ثم يستخدم v-للتوجيه لتقديم القوائم للتكرار من خلال مجموعة المهام المستلمة.

يُصدر الكود أيضًا حدثًا مخصصًا، إزالة ما يجب القيام به، مع حمولة فِهرِس. يتيح لك ذلك إزالة مهمة معينة باستخدام فهرس محدد في مصفوفة المهام.

عند النقر على يزيل الزر، يقوم المقتطف بتشغيل إصدار الحدث المخصص إلى المكون الأصلي. يشير هذا إلى أنك قمت بالنقر فوق الزر، مما يؤدي إلى تنفيذ الوظيفة المقابلة المحددة داخل المكون الأصلي، App.vue.

إنشاء مكون عرض التطبيق

رئيس لأكثر من App.vue لمواصلة بناء تطبيق Todo. ال برنامج سيتعامل المكون مع إضافة مهام جديدة وتقديم ملف لكى يفعل عنصر.

الصق ما يلي النصي الحظر في ملف App.vue الخاص بك:

<scriptsetup>
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>

يوضح مقتطف الكود أعلاه منطق App.vue عنصر. يستورد المقتطف ملف لكى يفعل المكون وتهيئة المتغيرات التفاعلية باستخدام Vue Composition API.

يبدأ الكود باستيراد مكون Todo وملف المرجع وظيفة من المسار المحدد و vue، على التوالى.

يقوم المقتطف بعد ذلك بتهيئة سلسلة تفاعلية، newTodo، لتخزين المهمة التي ستدخلها. كما أنه يقوم بتهيئة رد فعل فارغ جميع المهام مجموعة، وعقد قائمة المهام.

ال addTodo تضيف الوظيفة مهام جديدة إلى مجموعة المهام. إذا لم يكن newTodo فارغًا، فسيتم دفعه إلى المصفوفة عند التأكيد وإعادة تعيين قيمة newTodo للسماح لك بإضافة المزيد من المهام.

تقوم الدالة addTodo أيضًا باستدعاء حفظToLocalStorage, الذي يحفظ مجموعة المهام في LocalStorage للمتصفح. يستخدم المقتطف setItem طريقة لتحقيق ذلك وتحويل مجموعة المهام إلى سلسلة JSON قبل التخزين.

كما يحدد أ com.removeTodo الوظيفة التي تأخذ مفتاح كمعلمة. ويستخدم هذا المفتاح لإزالة المقابلة لكى يفعل من مجموعة المهام. بعد الإزالة، تستدعي وظيفة RemoveTodo saveToLocalStorage لتحديث بيانات LocalStorage.

وأخيرا، يستخدم الكود تحصل على البند الطريقة المتاحة لـ LocalStorage لجلب المهام المحفوظة مسبقًا باستخدام مفتاح todos. إذا قمت بحفظ المهام في LocalStorage بالمتصفح، فإن الكود يدفعها إلى مصفوفة المهام.

الآن بعد أن تعاملت مع منطق مكون App.vue، قم بلصق التعليمة البرمجية التالية في ملف نموذج كتلة تطبيق Vue الخاص بك لإنشاء واجهة المستخدم:

<template>
<divclass="app">
<h1>To do Listh1>
<divclass="add-todo">
<inputv-model="newTodo" @keyup.enter="addTodo"
 placeholder="Add a new task" class="todo-input" />
<button @click="addTodo"class="add-button">Addbutton>
div>
<Todo:todos="todos" @remove-todo="removeTodo" />
div>
template>

يستخدم القالب نموذج v, طريقة ربط البيانات في Vue لربط ما تم إدخاله بـ newTodo سلسلة رد الفعل. يستخدم القالب أيضًا الخامس علىالتوجيه للتعامل مع الأحداث في Vue من خلال اختصاره (@).

ويستخدم v-on للاستماع إلى كل من انقر و يدخل الأحداث الرئيسية لتأكيد newTodo.

وأخيرا، يستخدم القالب لكى يفعل المكون الذي قمت بإنشائه أولاً لعرض قائمة المهام. ال :كل شيء بناء الجملة يمر جميع المهام المصفوفة كدعامة لمكون Todo.

ال @remove-todo يقوم بناء الجملة بإعداد مستمع الحدث لالتقاط الحدث المخصص الذي يصدره مكون Todo واستدعاء com.removeTodo وظيفة في الاستجابة.

الآن بعد أن أكملت الطلب، يمكنك اختيار تصميمه حسب ذوقك. يمكنك معاينة التطبيق الخاص بك عن طريق تشغيل هذا الأمر:

npm run dev

يجب أن تشاهد شاشة مثل هذه:

يمكنك إضافة أو إزالة المهام داخل تطبيق Todo. علاوة على ذلك، بفضل تكامل LocalStorage، يمكنك تحديث التطبيق أو الخروج منه بالكامل؛ ستظل قائمة المهام المنسقة الخاصة بك سليمة.

أهمية التخزين المحلي

يعد تكامل LocalStorage في تطبيقات الويب أمرًا ضروريًا لكل من المطورين المبتدئين وذوي الخبرة. يقدم LocalStorage للمبتدئين كيفية ثبات البيانات من خلال السماح لهم بتخزين واسترجاع المحتوى الذي ينشئه المستخدم.

يعد LocalStorage مهمًا حيث يمكنك التأكد من بقاء بيانات المستخدم الخاصة بك سليمة عبر الجلسات المختلفة. يلغي LocalStorage الحاجة إلى الاتصال المستمر بالخادم، مما يؤدي إلى أوقات تحميل أسرع وتحسين الاستجابة في تطبيقات الويب.