Vue Academy · درس

Mutations وActions

غيّر الحالة باستخدام Mutations وActions غير المتزامنة

Mutations وActions درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 3 دروس في المجموع.

تغيير الحالة بأمان

في Vuex، لا تعدّل الحالة مباشرةً من أحد المكونات. بدلًا من ذلك، تمر جميع التغييرات عبر mutations. ويجعل هذا المسار الوحيد والصريح كل تغيير في الحالة قابلًا للتتبع والتصحيح في Vue DevTools.

ما هي mutation؟

إن mutation هي دالة متزامنة تتلقى الحالة الحالية وتغيّرها. وتُعد mutations المكان الوحيد المسموح فيه بتعديل الحالة.

mutations: {
  increment(state) {
    state.count++
  }
}

يجب أن تكون mutations متزامنة

يجب أن تعمل mutations بشكل متزامن. فإذا وضعت كودًا غير متزامن، مثل استدعاء شبكة، داخل mutation، فلن تتمكن DevTools من تتبع وقت تغيّر الحالة فعليًا، مما يعطّل تصحيح الأخطاء بالتنقل عبر الزمن.

تنفيذ mutation

لتشغيل mutation، نفّذ commit لها باسمها من أحد المكونات باستخدام this.$store.commit.

methods: {
  add() {
    this.$store.commit("increment")
  }
}

تمرير payload

تقبل mutations وسيطًا إضافيًا يُسمى payload، مما يتيح لك تمرير البيانات إلى التغيير.

mutations: {
  incrementBy(state, amount) {
    state.count += amount
  }
}

// commit with payload
this.$store.commit("incrementBy", 5)

حمولات بأسلوب الكائن

عند تمرير عدة قيم، مرّر حمولة على شكل كائن. فهذا أوضح وأكثر مرونة من الوسائط الموضعية.

mutations: {
  setUser(state, payload) {
    state.user = { id: payload.id, name: payload.name }
  }
}

this.$store.commit("setUser", { id: 1, name: "Ada" })

ما هو الإجراء؟

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

تعريف إجراء

يتلقى الإجراء كائن السياق. ومن خلاله يمكنك تنفيذ الطفرات باستخدام commit أو الوصول إلى الحالة.

actions: {
  async fetchUser(context, userId) {
    const res = await fetch("/api/users/" + userId)
    const data = await res.json()
    context.commit("setUser", data)
  }
}

تفكيك كائن السياق

من الشائع تفكيك commit مباشرةً من السياق للاختصار.

actions: {
  async loadTodos({ commit }) {
    commit("setLoading", true)
    const res = await fetch("/api/todos")
    commit("setTodos", await res.json())
    commit("setLoading", false)
  }
}

إرسال إجراء

تشغّل المكوّنات الإجراءات باستخدام this.$store.dispatch، مع تمرير حمولة بيانات اختيارية. ويعيد dispatch وعدًا للإجراءات غير المتزامنة.

methods: {
  async load() {
    await this.$store.dispatch("loadTodos")
  }
}

التدفق الكامل

تتم الدورة الكاملة كما يلي: يرسل المكوّن إجراءً، وينفّذ الإجراء عملًا غير متزامن ثم ينفّذ طفرة، وتقوم الطفرة بتغيير الحالة. بعد ذلك تحدّث الحالة التفاعلية واجهة المستخدم تلقائيًا.

اختبار سريع

اختبر معلوماتك حول الطفرات والإجراءات.

مراجعة

لا تتغير الحالة إلا من خلال الطفرات، وهي متزامنة ويُنفَّذ الالتزام بها باستخدام commit. أما المنطق غير المتزامن فيوجد داخل الإجراءات التي تُرسل باستخدام dispatch، وتنفّذ الطفرات عند اكتمالها. يقبل كلاهما حمولات بيانات لتمرير المعلومات. ستضيف بعد ذلك getters وتقسّم المتجر إلى وحدات.

الأسئلة الشائعة

هل درس «Mutations وActions» مجاني؟

نعم — نص درس «Mutations وActions» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 3 دروس في المجموع.

ماذا ستتعلم في «Mutations وActions»؟

غيّر الحالة باستخدام Mutations وActions غير المتزامنة تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.

كم من الوقت يستغرق درس «Mutations وActions»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy