إدارة الحالة عبر المكونات في Svelte

كيفية العمل مع Props وواجهة برمجة تطبيقات السياق والمتاجر في Svelte لتمرير الحالة حول المكونات المتقاطعة للتطبيق

يجعل Svelte التعامل مع حالة المكون الفردي أمرًا سهلاً للغاية.

لكن كيف نمرر الحالة عبر المكونات؟

حالة المرور حول استخدام الدعائم

الإستراتيجية الأولى شائعة في أطر عمل واجهة المستخدم الأخرى وتمرير الحالة حول استخدام الدعائم ،رفع الدولة.

عندما يحتاج أحد المكونات إلى مشاركة البيانات مع آخر ، يمكن نقل الحالة لأعلى في شجرة المكونات حتى يكون هناك أصل مشترك لهذه المكونات.

يجب أن يتم تمرير الحالة إلى أسفل حتى تصل إلى جميع المكونات التي تحتاج إلى معلومات الحالة هذه.

يتم ذلك باستخدام ملفاتالدعائم، وهي تقنية أعتقد أنها الأفضل لأنها بسيطة.

افحص الSvelte Props تعليميلمعرفة المزيد عن الدعائم.

واجهة برمجة تطبيقات السياق

هناك حالات لا تكون فيها الدعائم عملية. ربما يكون مكونان بعيدان جدًا في شجرة المكونات بحيث يتعين علينا نقل الحالة لأعلى إلى مكون المستوى الأعلى.

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

يتم توفير سياق API من خلال وظيفتين يتم توفيرهما بواسطةsvelteصفقة:getContextوsetContext.

يمكنك تعيين كائن في السياق ، وربطه بمفتاح:

<script>
import { setContext } from 'svelte'

const someObject = {}

setContext(‘someKey’, someObject) </script>

في مكون آخر ، يمكنك استخدام getContext لاسترداد الكائن المخصص لمفتاح:

<script>
import { getContext } from 'svelte'

const someObject = getContext(‘someKey’) </script>

يمكنك فقط استخدام ملفاتgetContextلاسترداد مفتاح إما في المكون الذي تم استخدامهsetContext، أو في واحدة إذا كان من نسلها.

إذا كنت تريد السماح لمكونين يعيشان في شجرتين مختلفتين من المكونات بالتواصل ، فهناك أداة أخرى لنا:المخازن.

باستخدام متاجر Svelte

تعد متاجر Svelte أداة رائعة للتعامل مع حالة تطبيقك عندما تحتاج المكونات إلى التحدث مع بعضها البعض دون تمرير الدعائم كثيرًا.

يجب عليك أولا الاستيرادwritableمنsvelte/store:

import { writable } from 'svelte/store'

وإنشاء متغير مخزن باستخدامwritable()دالة ، تمرير القيمة الافتراضية كأول وسيط:

const username = writable('Guest')

يمكن وضع هذا في ملف منفصل ، والذي يمكنك استيراده إلى مكونات متعددة ، على سبيل المثال يسمىstore.js(إنه ليس مكونًا ، لذا يمكن أن يكون بتنسيق.jsملف بدلا من.svelte:

import { writable } from 'svelte/store'
export const username = writable('Guest')

يمكن لأي مكون آخر يتم تحميل هذا الملف الآن الوصول إلى المتجر:

<script>
import { username } from './store.js'
</script>

الآن يمكن ضبط قيمة هذا المتغير على قيمة جديدة باستخدامset()، تمرير القيمة الجديدة كأول وسيط:

username.set('new username')

ويمكن تحديثه باستخدام ملفupdate()الوظيفة التي تختلف عنset()لأنك لا تقوم فقط بتمرير القيمة الجديدة إليها - تقوم بتشغيل دالة رد نداء تمرر القيمة الحالية كوسيطة لها:

const newUsername = 'new username!'
username.update(existing => newUsername)

يمكنك إضافة المزيد من المنطق هنا:

username.update(existing => {
  console.log(`Updating username from ${existing} to ${newUsername}`)
  return newUsername
})

للحصول على قيمة متغير المخزنبمجرد، يمكنك استعمال الget()تم تصدير الوظيفة بواسطةsvelte/store:

import { readable, get } from 'svelte/store'
export const username = writable('Guest')
get(username) //'Guest'

لإنشاء متغير تفاعلي بدلاً من ذلك ، يتم تحديثه كلما تغير ، يمكنك إضافة متغير المتجر مسبقًا باستخدام$، في هذا المثال$username. سيؤدي استخدام ذلك إلى عرض المكون كلما تغيرت القيمة المخزنة.

يعتبر Svelte$لتكون قيمة محجوزة وسيمنعك من استخدامها لأشياء لا تتعلق بقيم المخازن (والتي قد تؤدي إلى الارتباك) ، لذلك إذا كنت معتادًا على إضافة مراجع DOM مسبقًا باستخدام$، لا تفعل ذلك في Svelte.

هناك خيار آخر ، هو الأنسب إذا كنت بحاجة إلى تنفيذ بعض المنطق عندما يتغير المتغير ، وهو استخدام الامتدادsubscribe()طريقةusername:

username.subscribe(newValue => {
	console.log(newValue)
})

بالإضافة إلى المتاجر القابلة للكتابة ، توفر Svelte نوعين خاصين من المتاجر:متاجر قابلة للقراءةومخازن مشتقة.

متاجر Svelte المقروءة

المتاجر القابلة للقراءة خاصة لأنه لا يمكن تحديثها من الخارج - لا يوجدset()أوupdate()طريقة. بدلاً من ذلك ، بمجرد تعيين الحالة الأولية ، لا يمكن تعديلها من الخارج.

تُظهر مستندات Svelte الرسمية مثالًا مثيرًا للاهتمام باستخدام مؤقت لتحديث التاريخ. يمكنني التفكير في إعداد مؤقت لجلب الموارد من الشبكة ، أو إجراء مكالمة API ، أو الحصول على البيانات من نظام الملفات (باستخدام خادم Node.js محلي) أو أي شيء آخر يمكن إعداده بشكل مستقل.

في هذه الحالة بدلاً من استخدامwritable()لتهيئة متغير المتجر ، نستخدمreadable():

import { readable } from 'svelte/store'
export const count = readable(0)

يمكنك توفير وظيفة بعد القيمة الافتراضية ، والتي ستكون مسؤولة عن تحديثها. تستقبل هذه الوظيفة ملفsetوظيفة لتعديل القيمة:

<script>
import { readable } from 'svelte/store'
export const count = readable(0, set => {
  setTimeout(() => {
    set(1)
  }, 1000)
})
</script>

في هذه الحالة ، نقوم بتحديث القيمة من 0 إلى 1 بعد ثانية واحدة.

يمكنك إعداد فاصل زمني في هذه الوظيفة أيضًا:

import { readable, get } from 'svelte/store'
export const count = readable(0, set => {
  setInterval(() => {
	  set(get(count) + 1)
  }, 1000)
})

يمكنك استخدام هذا في مكون آخر مثل هذا:

<script>
import { count } from './store.js'
</script>

{$count}

المتاجر المشتقة من Svelte

يتيح لك المتجر المشتق إنشاء قيمة متجر جديدة تعتمد على قيمة المتجر الحالي.

يمكنك القيام بذلك باستخدام ملفderived()تم تصدير الوظيفة بواسطةsvelte/store، والتي تأخذ قيمة المخزن الحالية كمعامل أول ، وكمعامل ثانٍ وظيفة ، والتي تتلقى قيمة المخزن هذه كمعاملها الأول:

import { writable, derived } from 'svelte/store'

export const username = writable(‘Guest’)

export const welcomeMessage = derived(username, $username => { return Welcome </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">$username</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> })

<script>
import { username, welcomeMessage } from ‘./store.js’
</script>

{$username} {$welcomeMessage}

تحميل مجانيكتيب Svelte


المزيد من البرامج التعليمية svelte: