وداعاً Vuex: دليل المبتدئين لإدارة الحالة مع Pinia
لو كنت شغال بـ Vue.js بقالك فترة، أكيد مريت بلحظات "الخناق" مع Vuex. الملفات الكبيرة، الـ Mutations اللي مابتخلصش، والتعقيد في الـ Actions اللي بيخليك تلف حوالين نفسك عشان مجرد تعدل قيمة بسيطة في الـ State. إحنا هنا عشان نقولك إن فيه بديل أسهل بكتير، أخف، وأمتع في التعامل، وهو Pinia.
Pinia مش مجرد مكتبة جديدة، ده الـ State Management الرسمي الموصى بيه من فريق Vue، واللي فعلياً خلى الحياة أسهل بكتير للمبرمجين. يلا بينا نفهم ليه الناس سابت Vuex وراحت لـ Pinia.
Table of contents [Show]
ليه نختار Pinia وليه هي أفضل من Vuex؟
بص يا سيدي، المشكلة الأساسية في Vuex كانت الـ Complexity أو التعقيد. Pinia جت عشان تحل المشاكل دي عن طريق:
- دعم الـ TypeScript القوي: الـ Auto-completion في Pinia رهيب، هتحس إن الـ IDE بيكمل معاك الكود قبل ما تفكر فيه.
- وداعاً للـ Mutations: في Vuex كان لازم تستخدم Mutations عشان تغير الـ State، في Pinia الموضوع بقى مباشر، غير الـ State زي ما بتغير أي Variable عادي.
- خفيفة جداً: الحجم بتاعها ميكروسكوبي، ومش هتتقل الـ Bundle بتاع مشروعك.
- دعم الـ DevTools: تجربة الـ Debugging مع Pinia ممتعة جداً ومدمجة بشكل مثالي مع متصفحك.
ازاي تبدأ مع Pinia وتسطبها؟
الأمر أبسط مما تتخيل. لو عندك مشروع Vue 3، افتح الـ Terminal بتاعك واكتب الأمر ده:
npm install pinia
بعد كدة، محتاج "تربطها" ببرنامجك عن طريق الـ main.js أو main.ts:
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')
في Pinia، الـ Store هو المكان اللي بنخزن فيه البيانات بتاعتنا. وعندنا طريقتين نكتب بيهم الـ Store:
1. Options Store (زي Vuex):
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
actions: {
increment() {
this.count++
}
}
})
2. Setup Store (زي الـ Composition API): ودي الطريقة اللي بنصحك بيها لأنها أقوى بكتير:
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})
ازاي تستخدم الـ Store جوه الـ Components؟
استخدام الـ Store جوه أي Component عندك بقى سهل جداً. استدعي الـ Function اللي عملناها، واعمل لها Destructure، بس خد بالك لازم تستخدم storeToRefs عشان تحافظ على الـ Reactivity:
<script setup>
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
const store = useCounterStore()
const { count, doubleCount } = storeToRefs(store)
const { increment } = store
</script>
نصيحة من أخ لمبرمج
يا صديقي، التطور في عالم الـ Web Development سريع جداً. نصيحتي ليك إنك ما تبقاش متمسك بـ "القديم" لمجرد إنك متعود عليه. جرب Pinia في مشروع جانبي (Side Project)، هتحس بفرق كبير في سرعة كتابتك للكود ونظافة الـ Architecture بتاع التطبيق. الـ State Management مش لازم يكون وجع دماغ، Pinia أثبتت إن البساطة هي قمة الاحترافية.
استمر في التعلم، وجرب دايماً تقرأ الـ Documentation الرسمي، لأن فيه خبايا تانية كتير زي الـ Plugins والـ Actions المعقدة هتخليك مبرمج محترف بحق وحقيقي.
