الگوهای اثبات شده Pinia در Vue

در این دوره یوزکیس های پیچیده تر و بهترین شیوه های مدیریت state را با Pinia بررسی می کنید.

مقدمه

به دوره الگوهای اثبات شده Pinia برای تسلط به Vue خوش آمدید، جایی که ما الگوهای سطح حرفه‌ ای را که می‌ خواهید هنگام استفاده از کتابخانه مدیریت state در Vue در تولید بدانید، بررسی می‌ کنیم. ما بهترین شیوه ها را برای استفاده از Pinia در اپلیکیشن های شما بررسی کرده و آن‌ ها را در سناریوهای رایج اعمال می‌ کنیم.

اگر هنوز مبانی Pinia را یاد نگرفته‌ اید، ابتدا باید دوره دیگر ما را با عنوان تسلط به Vue بگذرانید.

در الگوهای اثبات شده Pinia، برخی از قوانین Pinia، روش مورد نیاز برای انجام کارها و همچنین برخی از الگوها، روش توصیه شده برای استفاده از Pinia، برای سازماندهی بهتر، وضوح بیشتر و کارآمدی فوق العاده اپلیکیشن های شما را بررسی خواهیم کرد.

ما یک پروژه نمونه را بررسی می کنیم تا با برخی از قوانین و الگوها در کانتکس یک اپلیکیشن واقعی آشنا شویم. پروژه نمونه از Pinia و Vue Router و Google Maps API و کتابخانه Vue از composables استفاده می کند.

ما آن را از ابتدا تا انتها نمی‌ سازیم، اما از آن برای بررسی دقیق‌ تر نحوه استفاده از Pinia در اپلیکیشنی که دارای چندین جریان داده است که باید در سراسر اپلیکیشن به اشتراک گذاشته شود، استفاده خواهیم کرد.

بیایید نگاهی به آنچه پروژه نمونه انجام می دهد بیاندازیم. این یک رستوران یاب که در آن شهر را تایپ می کنید و عبارت را جستجو می کنید تا رستوران‌ هایی را در یک منطقه خاص پیدا کنید. کاربر می تواند یک حساب کاربری ثبت کند تا بتواند رستوران های دلخواه خود را ذخیره کند. کاربران می توانند اطلاعات استخراج شده از Google Maps API مانند رتبه بندی ها و نظرات را بخوانند.

این اپلیکیشن state گلوبال خود را برای هر concern منطقی در Pinia store خود ردیابی می کند:

stores عبارتند از:

• احراز هویت کاربر
• موقعیت جغرافیایی برای شناسایی لوکیشن کاربر فعلی یا لوکیشنی که در نوار ورودی شهر تایپ می شود.
• داده‌ مربوط به رستوران‌ هایی که در جستجوی آن ها بازیابی می‌ شوند.
• داده مورد علاقه کاربران در حالی که رستوران های مورد علاقه خود را به لیست علاقه مندی های خود اضافه می کنند.

علاوه بر اینکه درک می کنیم که چگونه می‌ توانیم Pinia stores خود را سازماندهی کنیم و در مورد دو نوع stores که می‌ توانیم ایجاد کنیم: stores گزینه در مقابل stores راه‌ اندازی نیز یاد خواهیم گرفت. ما در مورد دسترسی و بروزرسانی state در سراسر اپلیکیشن خود یاد می گیریم.

در نهایت، ویژگی‌ های منحصربه‌ فرد بیشتری را که با Pinia ارائه می‌ شوند، مانند patch$ و reset$ و پلاگین‌ های Pinia که می‌ توانیم از ابتدا بسازیم، بررسی خواهیم کرد.

اکنون که ایده بهتری درباره اینکه به کجا می‌ رویم داریم، اجازه دهید یک دقیقه در مورد اینکه چرا حتی استفاده از Pinia را انتخاب می‌ کنیم در حالی که API Composition Vue 3 قبلا یک سیستم واکنش‌ گرایی داخلی قدرتمند با انعطاف‌ پذیری برای اشتراک‌ گذاری state دارد، صحبت کنیم. اگر فکر کرده اید که آیا Pinia حتی ضروری است یا خیر، در درس بعدی به آن خواهم پرداخت. بیایید شروع به کار کنیم.