آموزش Vue 3 • قسمت ۶: مدیریت وضعیت حرفهای با Pinia (جایگزین Vuex)
از پاس دادن پراپهای تو در تو (Prop Drilling) خسته شدی؟ 👾 تو این قسمت، میریم سراغ Pinia، راهکار رسمی و مدرن مدیریت وضعیت در Vue 3! یاد میگیریم چطور یک منبع دیتای متمرکز یا Store بسازیم تا هر کامپوننتی به راحتی بهش دسترسی داشته باشه.
این ویدیو بخشی از یک پروژه یکپارچه "Mini Dashboard" است که در آن، سیستم مدیریت وضعیت کاربر (احراز هویت) و تم برنامه (تاریک/روشن) را با Pinia پیادهسازی میکنیم.
____________
در این قسمت چه چیزهایی یاد میگیریم؟
چرا به مدیریت وضعیت نیاز داریم و Pinia چه مشکلی را حل میکند؟
نصب و راهاندازی Pinia در یک پروژه Vue 3 + Vite.
ساختار یک Store کامل با State, Getters و Actions.
ایجاد یک Store ماژولار برای مدیریت اطلاعات کاربر (authStore).
اتصال کامپوننتها به Store و نمایش دادههای واکنشگرا (Reactive) در UI.
فراخوانی اکشنها برای تغییر وضعیت برنامه با یک کلیک.
____________
🔗 لینکهای مفید:
سورس کد پروژه در گیتهاب: https://github.com/unknownman/bw8-vue3-dashboad/tree/6
پلیلیست کامل دوره آموزش : https://www.youtube.com/playlist?list=PLr5b_fwV98wAy1D1JifuSYvS8qzKd9Vfp
مستندات رسمی Pinia: https://pinia.vuejs.org/
ــــــــــــــــــــــــــــــ
✅ بخشهای مهم ویدیو
00:00 - مقدمه و معرفی مشکل (Prop Drilling)
01:36 - نصب و راهاندازی Pinia در پروژه
02:20 - ساخت اولین Store (authStore)
03:00 - تعریف State: دادههای اصلی Store
03:20 - تعریف Getters: دادههای محاسباتی
03:50 - تعریف Actions: متدهایی برای تغییر State
04:20 - اتصال Store به کامپوننت (Header.vue)
04:45 - نمایش دادهها و فراخوانی اکشنها در Template
05:30 - جمعبندی و چالش عملی (ساخت Theme Store)