آموزش Vue قسمت 2: ساختن یک برنامه کاری

پس از تکمیل اولین پروژه خود – یک برنامه هواشناسی – تصمیم گرفتم پروژه دوم را برای کشف بیشتر Vue.js انجام دهم: برنامه لیست کارها. این پروژه به من این امکان را داد که عمیق‌تر در سیستم واکنش‌پذیری Vue، ذخیره‌سازی محلی و مدیریت فرم غواصی کنم. در اینجا خلاصه ای از چیزهایی است که از ساخت آن یاد گرفته ام.

1. مدیریت فرم: جلوگیری از بازخوانی صفحه با @submit.prevent

یکی از اولین چیزهایی که متوجه شدم این بود که مدیریت فرم Vue چقدر قدرتمند است، به خصوص @submit.prevent بخشنامه با استفاده از این، من می‌توانم از رفتار پیش‌فرض ارسال‌های فرم جلوگیری کنم، که معمولاً منجر به به‌روزرسانی صفحه می‌شود. در برنامه من، استفاده کردم @submit.prevent="addTask" اطمینان حاصل شود که وقتی کاربران یک کار را اضافه می کنند، صفحه دوباره بارگیری نمی شود.

با این حال، من یاد گرفتم که وقتی از ارسال فرم در Vue جلوگیری می کنید، باید مطمئن شوید که فیلد ورودی دارای a است v-model محدود به یک ویژگی داده واکنشی است. در غیر این صورت، از آنجایی که مقدار ورودی در سیستم واکنشی Vue ردیابی یا به‌روزرسانی نمی‌شود، ممکن است فرم همچنان طوری رفتار کند که گویی در حال تازه‌سازی است.

2. واکنش پذیری: مدیریت وظایف با ref

درست مانند برنامه آب و هوای من، از Vue's استفاده کردم ref عملکردی برای مدیریت وضعیت وظایف من و ورودی فعلی. این به من اجازه داد تا وظایف را در یک آرایه ذخیره کنم و هنگامی که وظایف جدید اضافه یا حذف می شوند، رابط کاربری را به صورت پویا به روز کنم:

const task = ref('');
const tasks = ref([]);

const addTask = () => {
    if (task.value.trim() === '') return; // prevent adding empty tasks
    let taskObject = { id: Date.now(), name: task.value, checked: false };
    tasks.value.push(taskObject);
    updateLocalStorage();
    task.value = '';
};

این واکنش پذیری کلیدی برای پویا نگه داشتن برنامه است. هر گونه تغییر در tasks آرایه به طور خودکار رندرهای مجدد را در UI، بدون نیاز به دستکاری دستی DOM، راه اندازی می کند. اینجاست که Vue واقعا می درخشد.

3. محل ذخیره سازی: پایدار کردن برنامه

یکی از ویژگی های کلیدی که می خواستم در برنامه لیست کارهایم پیاده سازی کنم این بود پایداری. من نمی خواستم کاربران هنگام بازخوانی صفحه وظایف خود را از دست بدهند، بنابراین تصمیم گرفتم وظایف را در localStorage. من یاد گرفتم که Vue's onMounted قلاب چرخه حیات برای بازیابی داده ها هنگام بارگیری برنامه عالی است:

onMounted(() => {
    const storedTasks = localStorage.getItem('tasks');
    tasks.value = storedTasks ? JSON.parse(storedTasks) : [];
});

به این ترتیب وقتی کاربر برنامه را باز می کند، آن را بررسی می کند localStorage برای هر کار ذخیره شده قبلی و بارگیری آنها در وضعیت برنامه. هر زمان که کاری اضافه، اصلاح یا حذف شود، updateLocalStorage تابع برای ذخیره آخرین وضعیت وظایف فراخوانی می شود:

const updateLocalStorage = () => {
    localStorage.setItem('tasks', JSON.stringify(tasks.value));
};

این یک درس ارزشمند برای کاربرپسندتر کردن برنامه‌ها با حفظ حالت در جلسات بود.

4. مدیریت وظیفه: چک باکس ها و حذف

مدیریت وضعیت تکمیل وظایف یکی دیگر از چالش های سرگرم کننده بود. با استفاده از Vue's v-model برای اتصال چک باکس به هر کار checked ویژگی، من توانستم هر کار را به ورودی کاربر واکنش نشان دهم:

این به من این امکان را می دهد که وضعیت کار را با علامت زدن به صورت بصری به روز کنم:

 class="form-check-label" :style="{'text-decoration': todo.checked ? 'line-through' : 'none'}">{{todo.name}}

برای حذف کار، می خواستم مطمئن شوم که کاربران به طور تصادفی وظایف را حذف نکرده اند، بنابراین من یکپارچه شدم SweetAlert2 برای تایید حذف:

const deleteTask = (taskId) => {
    Swal.fire({
        title: "Are you sure you want to delete the task?",
        showDenyButton: true,
        confirmButtonText: "Yes, delete",
        denyButtonText: `No`
    }).then((result) => {
        if (result.isConfirmed) {
            tasks.value.splice(taskId, 1);
            updateLocalStorage();
            Swal.fire("Deleted!", "", "success");
        } else {
            Swal.fire("Task not deleted", "", "info");
        }
    });
};

این فرصت خوبی بود تا بررسی کنیم که چگونه Vue می‌تواند به راحتی با کتابخانه‌های خارجی مانند SweetAlert2 برای بهبود تجربه کاربری تعامل داشته باشد.

5. اعمال نفوذ v-for برای تکرار کار

نمایش چندین کار نمونه دیگری از کارهای Vue بود v-for بخشنامه به کار آمد این به من اجازه داد تا از طریق حلقه حلقه بزنم tasks آرایه کنید و هر کار را به صورت پویا ارائه کنید:

این دستورالعمل برای اطمینان از اینکه هر کار به‌درستی ارائه، به‌روزرسانی و مدیریت می‌شود، کلیدی بود که به تعامل با کاربر واکنش نشان دهد.

افکار نهایی: آنچه من از این پروژه به دست آورده ام

این پروژه فهرست کارها درک من را عمیق تر کرد سیستم واکنش پذیری Vue، به خصوص هنگام کار با فرم ها و ذخیره سازی محلی. شگفت‌انگیز است که Vue چگونه کارهایی مانند مدیریت ارسال‌های فرم، به‌روزرسانی رابط کاربری بر اساس تعاملات کاربر، و ماندگاری داده‌ها را بسیار آسان‌تر از انجام دستی انجام می‌دهد.

به طور خاص، یادگیری چگونه:

• از ارسال فرم ها جلوگیری کنید و از اتصال داده های واکنشی به آن اطمینان حاصل کنید v-model
• وظایف و فضای ذخیره سازی محلی را برای ماندگاری مدیریت کنید
• از کتابخانه های خارجی مانند SweetAlert2 برای بهبود تجربه کاربری استفاده کنید

…به من نسبت به قابلیت های Vue اطمینان داده است. اگر در Vue تازه کار هستید یا فقط به دنبال یک پروژه سرگرم کننده هستید، فهرست کارهایی که باید انجام دهید راهی عالی برای راحت تر شدن با مفاهیم اصلی مانند واکنش پذیری، مدیریت فرم و قلاب های چرخه حیات است.

کد نویسی مبارک!