Vue Academy · درس

‏defineStore: الحالة وGetters وActions

مقارنة Options store وSetup store، والحالة بصيغة دالة، وGetters المحسوبة، وActions غير المتزامنة

الدرس 2 من 413 خطوة

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

الأركان الثلاثة لـ store

يتكون option store من ثلاثة أجزاء: state (البيانات)، وgetters (القيم المشتقة)، وactions (الدوال التي تغيّر الحالة). وتعرّف الأجزاء الثلاثة داخل defineStore.

تعريف store

تتلقى defineStore سلسلة id فريدة وكائن خيارات. وتعيد composable، ويُسمى هذا الكائن عادةً useXxxStore.

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // state, getters, actions go here
})

state عبارة عن دالة

يجب أن يكون خيار state دالة تعيد كائنًا. ويضمن ذلك حصول كل مثيل من store على حالة جديدة، تمامًا مثل data() في المكونات.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Coddy' })
})

قراءة الحالة

استدعِ composable الخاصة بـ store داخل setup للحصول على مثيل، ثم اقرأ خصائص الحالة مباشرة. فهي تفاعلية.

const counter = useCounterStore()
console.log(counter.count) // 0

getters هي قيم محسوبة

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

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 2 }),
  getters: {
    doubled: (s) => s.count * 2
  }
})

استخدام getter

يمكنك الوصول إلى getter كما تصل إلى خاصية، من دون أقواس. ولا تعيد Pinia حسابه إلا عند تغير تبعياته.

const counter = useCounterStore()
console.log(counter.doubled) // 4

إشارة getters إلى getters أخرى

لاستخدام getter آخر، أشر إلى this بدلًا من وسيط الحالة. وعند استخدام this، لا تستخدم دالة سهمية.

getters: {
  doubled: (s) => s.count * 2,
  quadrupled() {
    return this.doubled * 2
  }
}

تغيّر actions الحالة

تُعد actions دوال. وتستخدم this لقراءة الحالة وتغييرها مباشرة. لا حاجة إلى commit أو dispatch — ما عليك سوى استدعاء الدالة.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ },
    addBy(amount) { this.count += amount }
  }
})

الإجراءات غير المتزامنة

يمكن أن تكون actions من النوع async. وهذا هو المكان المناسب لاستدعاءات API: اجلب البيانات، ثم أسند النتيجة إلى الحالة.

actions: {
  async loadUser(id) {
    const res = await fetch('/api/users/' + id)
    this.user = await res.json()
  }
}

استخدام store في مكون

استورد composable، واستدعها داخل <script setup>، ثم استخدم الحالة وgetters وactions في القالب.

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

<template>
  <p>{{ counter.count }} -> {{ counter.doubled }}</p>
  <button @click="counter.increment()">+</button>
</template>

تعديل حقول متعددة

لتغيير عدة حقول من الحالة دفعة واحدة، استخدم $patch. فهو يجمع التغييرات في إدخال واحد ضمن أدوات التطوير.

counter.$patch({ count: 10, name: 'New' })

تحقق سريع

اختبر معرفتك ببنية option store.

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

مراجعة

يتكون option store من ثلاثة أجزاء:

state: دالة تعيد كائن البيانات.
getters: قيم مشتقة مخزنة مؤقتًا، وتتلقى الحالة (أو تستخدم this).
actions: دوال تغيّر الحالة مباشرة باستخدام this.

استخدم store باستدعاء composable الخاصة به داخل setup.

البدء مجانًا

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

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

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

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

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

هل درس «‏defineStore: الحالة وGetters وActions» مجاني؟

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

ماذا ستتعلم في «‏defineStore: الحالة وGetters وActions»؟

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

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

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

كم من الوقت يستغرق درس «‏defineStore: الحالة وGetters وActions»؟

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

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

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

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

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