معرفی Vuex

ابزار Vuex یک الگوی مدیریت state + کتابخانه برای برنامه های Vue.js است. این ابزار همچنین با افزونه‌ی رسمی devools Vue ادغام می شود.

یک «الگوی مدیریت state» چیست؟

بیایید با یک برنامه‌ی شمارنده‌ی ساده در vue شروع کنیم:

این یک برنامه با سه بخش زیر است:

• بخش state، منبع اطلاعاتی که برنامه ما را هدایت می‌کند
• بخش view، نگاشتی از اطلاعات بخش state
• بخش actions، روشهای ممکن تغییر state در پاسخ به ورودی‌های کاربر در view

این یک نمایش ساده از مفهوم "جریان یک‌طرفه‌ی داده" است:

با این حال ، وقتی چندین مؤلفه با یک state مشترک داشته باشیم، سادگی به سرعت از دست می‌رود:

• ممکن است viewهای متفاوت به یک state یکسان وابسته باشند
• ممکن است actionهای متناظر با viewهای متفاوت، لازم داشته باشند که state یکسانی را تغییر دهند

پس چرا ما stateهای مشترک این مؤلفه‌ها را استخراج و در یک global singleton مدیریت نمی‌کنیم؟

با این کار درخت مؤلفات ما به یک view بزرگ تبدیل می‌شود و هر مؤلفه‌ای می‌تواند به state دسترسی داشته باشد و یا actionها را راه بیندازد؛ مهم نیست کجای درخت قرار داشته باشد.

با تعریف و تفکیک مفاهیم مربوط به مدیریت state و اجرای قوانینی که استقلال بین viewها و stateها را حفظ می‌کنند، ساختار و قابلیت نگهداری بیشتری به کد خود می‌دهیم.

این ایده‌ی اصلی پشت Vuex است، با الهام از Flux، Redux و The Elm Architecture. برخلاف سایر الگوها، Vuex همچنین یک کتابخانه است که به طور خاص برای Vue.js طراحی شده است.

چه زمانی باید از آن استفاده کنم؟

مفهوم Vuex به ما کمک می‌کند تا با پرداخت هزینه‌ی مفاهیم بیشتر و تکرار واضحات، state مشترک را مدیریت کنیم. این یک trade-off بین بهره‌وری کوتاه‌مدت و بلندمدت است.

اگر تا به حال ‌SPA در مقیاس بزرگ توسعه نداده‌اید و مستقیما به داخل Vuex شیرجه بزنید، ممکن است برایتان بسیار طولانی و وحشتناک جلوه کند. این کاملا طبیعی است؛ اگر برنامه‌ی شما ساده باشد بدون Vuex به خوبی سر خواهید کرد.