Vue Academy · درس

Getters وModules

احسب الحالة المشتقة ونظّم Store في Modules

الدرس 3 من 313 خطوة

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

الحالة المحسوبة باستخدام getters

قد تحتاج أحيانًا إلى حالة مشتقة، مثل قائمة مفلترة أو عدد معيّن. يُعد getter المكافئ لخاصية محسوبة في المتجر؛ إذ يشتق قيمة من الحالة ويخزّن النتيجة مؤقتًا إلى أن تتغير تبعياتها.

تعريف getter

الـ getter هو دالة تتلقى الحالة وتعيد قيمة مشتقة.

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  }
}

استخدام getters أخرى داخل getter

يتلقى getter وسيطًا ثانيًا يحتوي على جميع getters الأخرى، ما يتيح لك تركيبها معًا.

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  },
  completedCount(state, getters) {
    return getters.completedTodos.length
  }
}

الوصول إلى getters

اقرأ getters من خلال this.$store.getters داخل خاصية محسوبة.

computed: {
  doneCount() {
    return this.$store.getters.completedCount
  }
}

Getters بأسلوب الدوال

أعد دالة من getter لتمرير الوسائط إليها. لاحظ أن getters بأسلوب الدوال لا تُخزَّن مؤقتًا، بل تُنفَّذ عند كل استدعاء.

getters: {
  todoById: (state) => (id) => {
    return state.todos.find(t => t.id === id)
  }
}

// usage
this.$store.getters.todoById(3)

المساعد mapGetters

مثل mapState، يحوّل المساعد mapGetters getters إلى خصائص محسوبة تلقائيًا.

import { mapGetters } from "vuex"

export default {
  computed: {
    ...mapGetters(["completedTodos", "completedCount"])
  }
}

لماذا نقسّم المتجر إلى وحدات؟

يصعب الحفاظ على متجر واحد كبير. يتيح لك Vuex تقسيم المتجر إلى وحدات، لكل منها حالتها وطفراتها وإجراءاتها وgetters الخاصة بها، مما يحافظ على تجميع المنطق المرتبط معًا.

تعريف وحدة

الوحدة ليست سوى كائن يحتوي على الخيارات نفسها التي يحتوي عليها المتجر. وتُسجّل الوحدات ضمن المفتاح modules.

const cart = {
  state: () => ({ items: [] }),
  mutations: {
    addItem(state, item) { state.items.push(item) }
  },
  getters: {
    itemCount: (state) => state.items.length
  }
}

تسجيل الوحدات

اجمع الوحدات في المتجر الجذر ضمن modules. ويصبح كل مفتاح اسم الوحدة.

import { createStore } from "vuex"
import cart from "./modules/cart"
import user from "./modules/user"

export const store = createStore({
  modules: { cart, user }
})

تحديد نطاق أسماء الوحدات

اضبط namespaced: true كي تحصل الوحدة على نطاق خاص بها. ويمنع ذلك تعارض الأسماء بين الوحدات، كما يجعل البنية واضحة.

const cart = {
  namespaced: true,
  state: () => ({ items: [] }),
  getters: {
    itemCount: (state) => state.items.length
  }
}

الوصول إلى الوحدات ذات نطاق الأسماء

عند استخدام نطاق الأسماء، أضف اسم الوحدة في البداية عند تنفيذ الطفرات أو إرسال الإجراءات أو قراءة getters.

// module state lives under the module key
this.$store.state.cart.items

// namespaced getter, mutation, action
this.$store.getters["cart/itemCount"]
this.$store.commit("cart/addItem", item)
this.$store.dispatch("cart/checkout")

اختبار سريع

اختبر معلوماتك حول getters والوحدات.

أجب عليها في الدرس التفاعلي

مراجعة

تشتق getters قيمًا مخزّنة مؤقتًا من الحالة، ويمكن الوصول إليها عبر this.$store.getters أو mapGetters. تقسّم الوحدات المتجر الكبير إلى وحدات متخصصة؛ ويؤدي ضبط namespaced: true إلى تحديد نطاقها، بحيث تصل إلى أعضائها باستخدام البادئة module/name. أصبح لديك الآن مجموعة أدوات Vuex الكاملة: الحالة والطفرات والإجراءات وgetters والوحدات.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 42
الدروس: 156

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «Getters وModules» مجاني؟

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

ماذا ستتعلم في «Getters وModules»؟

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

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

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

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

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

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

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

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

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