أهلاً بيك يا صديقي المبرمج في مقال جديد من سلسلة شروحات تطوير الويب (Web Development). لو انت شغال بـ Vue.js وبناءً تطبيقات معقدة، غالباً حسيت في يوم من الأيام بوجع دماغ إدارة الـ State (إدارة الحالة) لما المشروع بيكبر. في الأول الـ Stores بتبقى شكلها جميل ولطيف، وفجأة تلاقي نفسك بتكرر كود عشان تعمل Save للبيانات في الـ LocalStorage، أو نفسك تراقب كل تغيير بيحصل في الـ Store عشان تطبع logs أو تبعت analytics.

زمان كنا بنعانى مع Vuex، ولما ظهرت بينا (Pinia) كبديل عصري وخفيف لإدارة الـ State (State Management)، الدنيا بقت أروق بكتير. بس الأجمل بقى هو إن Pinia مش بس أداة بسيطة، دي بتدعم نظام إضافات خارق اسمه Pinia Plugins. في المقال ده، هنتكلم بالتفصيل عن إزاي نستخدم الـ Plugins دي عشان نعمل إدارة حالة معقدة جداً باحترافية، ونضيف ميزات زي التخزين التلقائي (Persisted State) ومراقبة التغييرات (State Monitoring) من غير ما نكرر سطر كود واحد.

إيه هي أصلاً الـ Pinia Plugins وإزاي بتشتغل تحت الكبوت؟

الـ Pinia Plugin هي باختصار عبارة عن دالة (Function) بتضيف خصائص جديدة لكل الـ Stores اللي عندك في التطبيق. لما بتعمل pinia.use()، بينيا بتنفذ الدالة دي على كل Store جديد بيتم إنشاؤه.

الـ Plugin دي بتقدر ترجع (Return) أي خواص جديدة عايز تضيفها للـ Store، أو حتى تعدل على الـ Actions و الـ State الحالية. الفكرة هنا إنك بتكتب الكود مرة واحدة بس، ويسمع في كل الـ Stores بتاعتك تلقائياً.

تعالوا نشوف شكل بسيط لـ Plugin بيكتب لوج مع كل تغير بيحصل في الـ State:

// myPlugin.js
export function myLoggerPlugin({ store }) {
  store.$subscribe((mutation, state) => {
    console.log(`الـ Store اللي اتغير هو: ${store.$id}`)
    console.log('نوع التعديل:', mutation.type)
    console.log('القيمة الجديدة:', state)
  })
}

عمل Plugin للتخزين التلقائي (Persisted State) بنفسك

من أكتر الحاجات اللي بنحتاجها في أي تطبيق Vue هي إننا نحفظ الـ State في الـ LocalStorage عشان لو المستخدم عمل ريفرش للصفحة، البيانات متطيرش. صحيح فيه مكتبات جاهزة زي pinia-plugin-persistedstate، بس فهمك لإزاي تعملها بنفسك هيخليك مبرمج أسطوري فاهم الـ State Management على أصوله.

تعالوا نبني Plugin بسيطة بتعمل Persist للـ State تلقائياً:

export function localstoragePlugin({ store }) {
  // أول ما الـ Store يشتغل، بنحاول نقرأ البيانات القديمة من LocalStorage
  const storedData = localStorage.getItem(`pinia_store_${store.$id}`)
  if (storedData) {
    store.$patch(JSON.parse(storedData))
  }

  // بنراقب أي تغير يحصل ونخزنه فوراً
  store.$subscribe((mutation, state) => {
    localStorage.setItem(`pinia_store_${store.$id}`, JSON.stringify(state))
  })
}

عشان تفعل الـ Plugin دي في تطبيق الـ Vue بتاعك، هتعمل كده في ملف الـ main.js:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { localstoragePlugin } from './myPlugin'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

// ربط الـ Plugin بـ Pinia
pinia.use(localstoragePlugin)

app.use(pinia)
app.mount('#app')

مراقبة التغييرات المتقدمة (Advanced State Monitoring) وإرسال الأخطاء

في التطبيقات الكبيرة (Enterprise Applications)، مراقبة الـ State مبقتش رفاهية، دي بقت ضرورة عشان نعرف لو فيه Bugs حصلت والعميل اشتكى. باستخدام Pinia Plugins، نقدر نعمل نظام مراقبة متقدم يبعت أي خطأ أو Action غريب لـ Error Tracking Service زي Sentry.

تعالوا نشوف مثال لـ Plugin بتراقب الـ Actions وتعمل Catch لأي Error بيحصل جواها:

export function errorTrackingPlugin({ store }) {
  store.$onAction(({ name, store, args, after, onError }) => {
    // بنسجل بداية الـ Action
    console.log(`الـ Action اللي اسمه [${name}] اتولد في الـ Store [${store.$id}]`)

    // لو الـ Action ضرب خطأ (Error)
    onError((error) => {
      console.error(`كارثة! حصل خطأ في الـ Action: ${name}`, error)
      // هنا ممكن تبعت الخطأ لـ Sentry أو Server خارجي
    })
  })
}

بالطريقة دي، ضمنت إن كل الـ Stores بتاعتك بقت مراقبة وتحت الإشراف من غير ما تحتاج تكتب Try/Catch في كل مكون (Component) أو Action بتعمله.

نصيحة من أخ لتطوير مهاراتك

يا صاحبي، السهل الممتنع في الـ Vue.js هو إنك متستسهلش وتحط كل الكود في مكان واحد. الـ Pinia Plugins دي نعمة كبيرة للمطورين لأنها بتخلي الكود نظيف جداً ومقسّم (Modular). نصيحتي ليك: متجريش على طول تركب مكتبات خارجية جاهزة لكل حاجة، حاول تفهم الفكرة وراء الـ Plugins واكتب بايديك البلوجينز اللي تخص شغلك ومشاريعك. ده هيخليك تفهم الـ Ecosystem بتاع Vue بعمق، ومش بس مجرد مبرمج بينسخ كود من StackOverflow. ابدأ طبق الكلام ده حالا في مشروعك الجاي وهتحس بالفرق بنفسك!