پیچیدگیvue 3 با (state-management) pinia راحت است

vuex

pinia

مدیریت استیت ها (state-mangement) اولین مورد در برنامه نویسی وب اپلیکیشن است،هرچیزپیش پا افتاده که در نوع اپلیکیشن ها ومدیریت وضعیت (state-management) نیاز داریم. درسالیان دراز، این vuex بود که مدیریت استیت (state-management) عملا مدیریت می کرد.

با این حال در داکیومنت جدید ویوجی اس توصیه می کند pinia جایگزین vuex استفاده کنیم.اما قبل از پاسخ دادن به شما،فعلا هیچ ابزار دیگری برای یادگیری نیست.شما باید pinia عملا در vuex نسخه 5 بدانید.

در این آموزش، ویژگی خصوصیات pinia بررسی ومطالعه می کنیم و از data stores ها استفاده می کنیم.

پروژه ای که قرار است بسازیم،اصول اولیه پیچیده ساخت اپلیکیشن ها نشان می دهد اما ابتدا باید بدانیم که pinia چه تفاوتی با vuex دارد.

Pinia vs vuex

اگر چهpinia در نسخه vuex 5 ارائه داده می شود،ولی در میان ذهن شما تفاوت های زیادی وجود دارد.

ویژگی های مهم pinia

1) در pinia اون mutations نداریم.

2) در pinia هم تایپ اسکریپت و جاوا اسکریپت شما می توانیدکار کنید

3) در pinia دیگر نیازی به ماژول های تو در تو نداریم،اما اگراولین store در store دیگری استفاده کردید این می تواند در نظر گرفته شود که ماژول های تودرتو دارید.

4) در pinia اون namespace که در ماژول های vuex بود ،دیگر نیازی نداریم.

5) در pinia composition api vue3 و option api vue2 می توانیم استفاده کنیم.

6) در pinia پشتیبانی ssr (server-side-rendering) دارد.

7) در devtools کروم vue 2, vue3 می توانیم pinia استفاده کنیم.

یک مثال خیلی ساده در مورد store pinia

ساده ترین مثال برای مدیریت pinia

اون define store که در function استفاده می کنیم. به جای createstore است ،زیرا store جدیدی توسعه نمی دهیم این واحد ها در یک کامپونت page یا یک صفحه استفاده می کنیم.

یک نام در pinia برای کار با store شروع می کنیم.هر یک از store ها باید یک id یکتا یا (unique) داشته باشد که اولین چیزی باشد که در store devtools نشان میدهد.

در pinia می توانیم مفاهیم state,getters,actions استفاده کنیم.این هست معادل data,computed,methods که در کامپونت های ویو جی اس استفاده کنیم

state

در وضعیت (state) فانشن های که در یک تعریف اولیه تعریف شده است را بر می گرداند

getters

در getters شما می توانید function هایی دریافت کنید که در اولین آرگومان state هستند

actions

در actions شما فانشن های مینویسد که در یک store که می خواهید با pinia کار کنید و استفاده کنید.

این همه نیاز شما که در store pinia فراهم شده و می دانید.

ما در حقیقت store های که در صفحه های کامپونت در آموزش باقی مانده است ما بینیم و استفاده می کنیم

در ادامه حتما مثال های اموزش های که برای pinia زدم نگاه کنید

تو این اموزش سعی کردم به صورت خیلی ساده pinia به صورت یک ویدئو به شما یاد بدهم وامیدوارم که لایبری در سایت pinia مطالعه کنید چون قراره در اینده در vue-js اتفاقاتی بیفتد پس حتما کلیپ ببینید که از این اتفاقات در ویوجی اس با خبر باشید

https://www.linkedin.com/posts/pooria-ashkevar-vakili-6457a917a_state-managment-in-vue-3-with-typescript-activity-6911653785115201537-p1em?utm_source=linkedin_share&utm_medium=member_desktop_web

این لینک در لینکدین حتما مطالعه کنید تا از موضوع مطلع شوید

https://www.aparat.com/v/HzcDX

ادرس گیت هاب پروژه pinia

https://github.com/pooriaashkevarvakili/project-test-pinia

https://lnkd.in/gpCTzTf3

https://lnkd.in/g_uJTth8

ترجمه شده از سایت