Vue Academy · درس

أساسيات Vuex

افهم Store في Vuex والحالة المركزية

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

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

لماذا نستخدم الحالة المركزية؟

مع نمو تطبيقات Vue، تصبح مشاركة البيانات بين العديد من المكونات أمرًا صعبًا. ويؤدي تمرير الخصائص إلى الأسفل وإطلاق الأحداث إلى الأعلى عبر أشجار متداخلة بعمق إلى بنية هشة. يحل Vuex هذه المشكلة من خلال متجر مركزي واحد يمكن لأي مكون القراءة منه والكتابة فيه بطريقة يمكن التنبؤ بها.

المصدر الوحيد للحقيقة

يتبع Vuex تدفقًا أحادي الاتجاه للبيانات. وتوجد كل حالة التطبيق المشتركة في مكان واحد يُسمى المتجر. تقرأ المكونات الحالة من المتجر وتطلب التغييرات من خلال API مضبوط، لذلك تعرف دائمًا مصدر البيانات وكيفية تغيّرها.

تثبيت Vuex

إن Vuex 4 هو الإصدار المخصص لـ Vue 3. ثبّته باستخدام مدير الحزم، ثم أنشئ المتجر وسجّله في تطبيقك.

npm install vuex@4

إنشاء المتجر

استخدم createStore لتعريف متجر. وخيار state هو دالة تُرجع كائن الحالة التفاعلي الأولي.

import { createStore } from "vuex"

export const store = createStore({
  state() {
    return {
      count: 0,
      user: null
    }
  }
})

تسجيل المتجر

مرّر المتجر إلى تطبيقك باستخدام app.use(store). ويجعله ذلك متاحًا لكل مكون من خلال this.$store.

import { createApp } from "vue"
import App from "./App.vue"
import { store } from "./store"

const app = createApp(App)
app.use(store)
app.mount("#app")

خاصية الحالة

يحتوي كائن state على بيانات تطبيقك. وهو تفاعلي؛ فعندما تتغير الحالة، يُعاد عرض أي مكون يستخدمها تلقائيًا. فكّر فيه باعتباره data() لتطبيقك بأكمله.

state() {
  return {
    todos: [],
    isLoading: false,
    theme: "light"
  }
}

الوصول إلى الحالة في Options API

داخل المكون، تصل إلى المتجر من خلال this.$store.state. وتحافظ خاصية computed على تفاعلية القيمة.

export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}

استخدام الحالة في القالب

بعد إتاحة الحالة عبر خاصية computed، تُستخدم في القالب مثل أي قيمة محلية.

<template>
  <p>Current count: {{ count }}</p>
</template>

المساعد mapState

إن كتابة العديد من خصائص computed يدويًا أمر متكرر. وينشئ المساعد mapState هذه الخصائص نيابةً عنك من مصفوفة تحتوي على أسماء الحالة.

import { mapState } from "vuex"

export default {
  computed: {
    ...mapState(["count", "user"])
  }
}

استخدام mapState مع إعادة التسمية

مرّر كائنًا إلى mapState لإعادة تسمية الخصائص أو لحساب قيم مشتقة من الحالة.

computed: {
  ...mapState({
    total: "count",
    userName: (state) => state.user ? state.user.name : "Guest"
  })
}

الوصول إلى الحالة في Composition API

مع Composition API، استدعِ useStore() داخل setup للحصول على نسخة المتجر، ثم اقرأ الحالة من خلال computed.

import { computed } from "vue"
import { useStore } from "vuex"

export default {
  setup() {
    const store = useStore()
    const count = computed(() => store.state.count)
    return { count }
  }
}

تحقق سريع

اختبر مدى فهمك لأساسيات Vuex.

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

مراجعة

يوفر Vuex متجرًا مركزيًا وتفاعليًا باعتباره المصدر الوحيد للحقيقة. تنشئه باستخدام createStore، وتسجّله عبر app.use، وتقرأ state من خلال خصائص computed أو المساعد mapState. وفي Composition API، تصل إلى المتجر باستخدام useStore(). ستتعلّم بعد ذلك كيفية تغيير هذه الحالة بأمان.

البدء مجانًا

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

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

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

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

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

هل درس «أساسيات Vuex» مجاني؟

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

ماذا ستتعلم في «أساسيات Vuex»؟

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

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

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

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

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

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

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

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

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