مواردی که می خواهیم در این نوشته با هم بررسی کنیم در زیر لیست شده اند:
ویواکس یک ابزار یا شی برای مدیریت state ها در ویوجی اس است و اگر بخواهیم خیلی ساده بیان کنیم تمام داده ها (data) را درون state تعریف می کنیم.
داده هایی که در vuex ذخیره می شوند دقیقا از قوانین مشابه به داده هایی پیروی می کنند که در نمونه ویو (vue instance) تعریف میکنیم.
ویواکس رو می توانیم یک انبار در نظر بگیریم، که از همه ی قسمت های پروژه به آن انبار دسترسی داریم و می توانیم از آن داده ها استفاده کنیم و به سادگی آنها رو مدیریت کنیم و همین باعث می شود که در پروژه های بزرگ مدیریت داده ها ساده تر شود.
در پروژه های کوچک به هیچ عنوان لازم نیست از ویواکس استفاده کنیم.
اگر در حال توسعه یک SPA (اپلیکیشن تک صفحه ای) ساده هستید، به هیچ عنوان لازم نیست از ویواکس استفاده کنید. زیرا در پروژه های کوچک داده های ما کم است و مدیریت آنها هم ساده است، پس احتیاجی به استفاده از ویواکس نیست.
اما در پروژه های بزرگ که دارای component های تودر توی زیادی است و داده های ما هم زیاد است، مدیریت داده ها سخت می شود و اینجاست که ویواکس به کمک ما می آید و با استفاده از ویواکس می توانیم پروژه را ساده تر توسعه دهیم.
برای نصب ویواکس لازم است که node js و npm را نصب داشته باشید و همچنین یک پروژه ی ویوجی اسی داشته باشیم تا ویواکس را روی آن نصب کنیم.
من در اینجا می خواهم یک پروژه با استفاده از vue cli بسازم، پس باید vue cli رو هم بر روی سیستم خودمان نصب داشته باشیم.
npm install -g @vue/cli
با دستور بالا vue cli بصورت سراسری (global) بر روس سیستم ما نصب می شود و از همه جای سیستم می توانیم از آن استفاده کنیم.
برای ساخت پروژه ویو جی اسی از دستور زیر استفاده می کنیم:
vue create vuex-test
در قسمت vuex-test نام دلخواه خودتان را بر روی پروژه قرار بدهید.
بعد از همه ی این کارها نوبت به نصب ویواکس می رسد، که برای نصب ویو اکس درون پوشه پروژه خودتان (پوشه پروژه من اینجا vuex-test است.) دستور زیر را اجرا می کنیم:
npm add vuex
همانطور که مشاهده می کنید، یک فولدر به نام store به پروژه ما اضافه شده است که درون این فولدر یک فایل با نام index.js قرار دارد که محتویات درون این فایل بدین صورت است:
در خط اول و دوم پروژه به ترتیب vue و vuex را import کردیم.
بعد از این دستورات، ویواکس رو use کردیم و در خط های بعدی اومدیم و یک store ساختیم، که store ما دارای چند شی است:
state
mutations
actions
modules
یادتون باشه حتما export default رو انجام بدین که بتوانید از vuex استفاده کنید.
در آخر هم باید store رو به ویو بدیم که بتوانیم از همه جای پروژه به اون دسترسی داشته باشیم، که در فایل main.js اینکار رو انجام می دهیم:
در آموزش های بعدی در مورد state, mutations, actions, getters ها و موضوعات مربوط به ویواکس صحبت میکنم.
خوشحال میشم نظرتونو در مورد این نوشته برام بنویسید، هم در مورد محتوای نوشته و هم نوع نوشتن من، و سوالی هم داشتید در قسمت نظرات اون رو بیان کنید.
