Vue Academy · درس

استمرارية Pinia وDevtools

‏pinia-plugin-persistedstate، وحفظ حقول محددة فقط، وإمكانية time-travel في Pinia devtools

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

حفظ حالة المتجر

تُفقد حالة Pinia افتراضيًا عند إعادة تحميل الصفحة. للاحتفاظ بها، استخدموا إضافة pinia-plugin-persistedstate التي تزامن الحالة مع localStorage أو sessionStorage.

تثبيت الإضافة

سجّلوا الإضافة مرة واحدة في مثيل Pinia. بعد ذلك يمكن لكل متجر تفعيلها اختياريًا.

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

تفعيل حفظ الحالة في متجر

اضبطوا persist: true في خيارات المتجر. الآن ستُحفظ الحالة بأكملها وتُستعاد تلقائيًا.

export const useUserStore = defineStore('user', {
  state: () => ({ name: '', token: '' }),
  persist: true
})

اختيار وحدة التخزين

يحدد الخيار storage مكان الحفظ. استخدموا sessionStorage للبيانات التي ينبغي حذفها عند إغلاق علامة التبويب.

persist: {
  storage: sessionStorage
}

حفظ بعض الحقول فقط

يحدّ الخيار paths من مفاتيح الحالة التي يتم حفظها. وهذا مثالي للاحتفاظ برمز مميز دون أعلام واجهة المستخدم المؤقتة.

persist: {
  paths: ['token', 'name'] // 'isLoading' not persisted
}

تسلسل المتجر

يعمل حفظ الحالة من خلال تسلسل الحالة إلى JSON. يجب أن تكون القيم آمنة للاستخدام مع JSON — كائنات عادية، ومصفوفات، وسلاسل نصية، وأرقام. تحتاج Functions وMaps ومثيلات الأصناف إلى مُسلسِل مخصص.

persist: {
  serializer: {
    serialize: JSON.stringify,
    deserialize: JSON.parse
  }
}

أدوات تطوير Pinia

عند تثبيت Vue Devtools، تضيف Pinia لوحة مخصصة. يمكنكم فحص كل متجر، ومراقبة تغيّر الحالة مباشرة، وتعديل القيم مباشرة.

تصحيح الأخطاء بالسفر عبر الزمن

يظهر كل إجراء في المخطط الزمني لأدوات التطوير. يمكنكم السفر عبر الزمن: الانتقال إلى حالة سابقة لإعادة إنتاج خطأ، ثم التقدم من جديد.

ترطيب المتجر وSSR

في العرض من جانب الخادم، يملأ الخادم المتجر، ثم يجب على العميل إجراء hydrate باستخدام البيانات نفسها حتى تتطابق العلامات. تؤدي الحالة غير المتطابقة إلى تحذيرات الترطيب.

استخدام Pinia مع Nuxt

تربط الوحدة @pinia/nuxt بين Pinia وNuxt، وتتولى ترطيب SSR تلقائيًا. تُسلسل الحالة التي مُلئت أثناء العرض على الخادم داخل الصفحة، ثم تُستعاد على العميل.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

دمج حفظ الحالة مع SSR

انتبهوا: لا توجد localStorage على الخادم. تكتشف إضافات حفظ الحالة ذلك وتعمل على جانب العميل فقط، لذا يستخدم ترطيب SSR حالة الخادم، ثم تُضاف طبقات حفظ الحالة.

اختبار سريع

اختبروا معرفتكم بحفظ الحالة وأدوات التطوير.

خلاصة

لقد تعلمتم حفظ الحالة وأدواتها:

تحفظ pinia-plugin-persistedstate الحالة في مساحة التخزين المحلية أو مساحة تخزين الجلسة.
تتحكم خيارات storage وpaths في مكان الحفظ وما يتم حفظه.
تُسلسل الحالة إلى JSON، لذا يجب أن تكون القيم آمنة للاستخدام مع JSON.
توفر أدوات التطوير فحصًا مباشرًا وإمكانية السفر عبر الزمن؛ وتتولى @pinia/nuxt ترطيب SSR.

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

هل درس «استمرارية Pinia وDevtools» مجاني؟

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

ماذا ستتعلم في «استمرارية Pinia وDevtools»؟

‏pinia-plugin-persistedstate، وحفظ حقول محددة فقط، وإمكانية time-travel في Pinia devtools تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «استمرارية Pinia وDevtools»؟

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

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

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

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

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