مدیریت حالت در Svelte – آموزش Svelte (بخش دوم)

در Svelte هر کامپوننت علاوه بر تعریف markup ،CSS و منطق جاوا اسکریپت، می‌تواند حالت (State) خاص خود را میزبانی کند. حالت به هر داده‌ای گفته می‌شود که کامپوننت برای رندر کردن محتوایش به آن نیاز دارد. برای نمونه اگر در فیلد ورودی یک فرم دارای رشته test باشد، باید متغیری باشد که این مقدار را نگهداری کند. این همان حالت فیلد ورودی است. یا اگر فیلدی انتخاب شده باشد، یک متغیر در جایی این مسئله را ثبت می‌کند. این‌ها همگی جزئی از حالت هستند. بنابراین در این مقاله به توضیح روش مدیریت حالت در Svelte می پردازیم. برای مطالعه بخش قبلی این مجموعه مقالات آموزشی روی لینک زیر کلیک کنید:

• معرفی Svelte و کامپوننت‌های آن — آموزش Svelte (بخش اول)

حالت در Svelte

حالت در بخش script یک کامپوننت ذخیره می‌شود:

اگر سابقه کار با فریمورک‌های فرانت‌اند مانند Vue یا React را داشته باشید، شاید از خود بپرسید چطور می‌توان این مقادیر را به‌روزرسانی کرد؟ دلیل این مسئله آن است که آن فریمورک‌ها این کار را به روشی نسبتاً غیر سرراست انجام می‌دهند. یک نکته عالی در مورد Svelte این است که برای به‌روزرسانی حالت یک کامپوننت نیاز به انجام کار خاصی نیست. تنها کاری که باید انجام داد، انتساب است. برای نمونه می‌توانید از یک انتساب ساده جاوا اسکریپت با استفاده از عملگر = استفاده کنید.

فرض کنید یک متغیر به نام count دارید. می‌توانید آن را با استفاده از کد زیر افزایش دهید:

یا می‌توانید از کد زیر استفاده کنید:

نمونه کد به صورت زیر است:

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

البته باید به یک نکته توجه داشته باشیم که به سرعت آموخته می‌شود: در زمان تغییر دادن یک مقدار نیز باید از انتساب استفاده کنیم. Svelte همواره به انتساب نیاز دارد، در غیر این صورت ممکن است تشخیص ندهد که حالت تغییر یافته است. برای مقادیر ساده مانند رشته‌ها و اعداد، این وضعیت عموماً به صورت پیش‌فرض وجود دارد، زیرا همه متدهای رشته‌ها، یک رشته جدید بازگشت می‌دهند و در مورد اعداد نیز برخی به این روش عمل می‌کند و از این رو «تغییرناپذیر» (immutable) هستند.

در مورد آرایه‌ها نمی‌توانیم از متدهایی که آرایه‌ها را تغییر می‌دهند مانند ()push() ،pop() ،shift() ،splice استفاده کنیم، زیرا هیچ انتسابی وجود ندارد. آن‌ها ساختارهای درونی خود را تغییر می‌دهند، اما Svelte نمی‌تواند این را تشخیص دهد. با این حال همچنان می‌توان از آن‌ها استفاده کرد، ولی پس از اجرای عملیات باید متغیر را مجدداً به خودش انتساب دهیم. به مثال زیر توجه کنید:

مثال فوق کمی سردرگم‌کننده است، اما آن را به سرعت به خاطر می‌سپارید. همچنین می‌توانید از عملگر spread برای اجرای عملیات استفاده کنید:

واکنش‌پذیری Svelte

در Svelte می‌توانیم به تغییرهای رخ داده در حالت کامپوننت گوش دهیم و متغیرهای دیگر را به‌روزرسانی کنیم. برای نمونه اگر یک متغیر count داشته باشیم:

و با کلیک کردن یک دکمه آن را به‌روزرسانی کنیم:

می‌توانیم با استفاده از ساختار خاص :$ که یک بلوک جدید تعریف می‌کند، به تغییرات رخ داده روی count گوش کنیم. در این حالت هر زمان که متغیر ارجاع یافته تغییر پیدا کند، Svelte بلوک فوق را مجدداً اجرا می‌کند. به مثال زیر توجه کنید:

ما از بلوک زیر استفاده می‌کنیم:

می‌توانید بیش از یکی از آن‌ها را بنویسید:

همچنین می‌توانید یک بلوک برای گروه‌بندی بیش از یک گزاره اضافه کنید:

ما از یک فراخوانی ()console.log استفاده کردیم، اما شما می‌توانید متغیرهای دیگر را نیز به‌روزرسانی کنید:

Props در Svelte

می‌توان یک کامپوننت Svelte را با استفاده از ساختاری مانند زیر در هر کامپوننت دیگر ایمپورت کرد:

به مثال زیر توجه کنید:

مسیر نسبت به مسیر کامپوننت نسبی است. معنی /. این است که پوشه همان پوشه است. می‌توان از /.. برای رفتن به یک پوشه بالاتر و همین طور تا آخر استفاده کرد. زمانی که این کار را انجام دادید، می‌توانید از کامپوننت ایمپورت شده اخیر در markup مانند یک تگ HTML استفاده کنید:

بدین ترتیب یک رابطه والد/فرزند بین دو کامپوننت شکل می‌گیرد که یکی ایمپورت می‌کند و دیگری ایمپورت می‌شود. در اغلب موارد می‌خواهیم که کامپوننت والد داده‌ها را به کامپوننت فرزند ارسال کند. این کار با استفاده از props میسر است. props خصوصیاتی شبیه به HTML معمولی دارد و یک شکل یک‌طرفه از ارتباط محسوب می‌شود. در این مثال ما یک prop به نام disabled ارسال می‌کنیم و در آن مقدار true را می‌فرستیم:

در کامپوننت SignupForm باید prop به نام disabled را به صورت زیر اکسپورت کرد:

این روشی برای بیان این واقعیت است که prop به کامپوننت‌های والد عرضه شده است. زمانی که از این کامپوننت استفاده می‌کنید، می‌توانید یک متغیر به جای یک مقدار ارسال کنید تا آن را به صورت دینامیک تغییر دهید:

زمانی که مقدار متغیر disabled تغییر می‌یابد، کامپوننت فرزند با مقدار prop جدید به‌روزرسانی می‌شود. به مثال زیر توجه کنید:

بدین ترتیب به پایان این بخش از سری مقالات آموزش جامع Svelte می‌رسیم. برای مطالعه بخش بعدی روی لینک زیر  کلیک کنید:

• مدیریت حالت بین کامپوننتی در Svelte — آموزش Svelte (بخش سوم)

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های JavaScript (جاوا اسکریپت)
• آموزش JavaScript ES6 (جاوا اسکریپت)
• مجموعه آموزش‌های برنامه‌‌نویسی
• معرفی Svelte و کامپوننت های آن
• ۱۱ ترفند بسیار کاربردی جاوا اسکریپت — به زبان ساده

==