ابزار Vuex یک الگوی مدیریت state + کتابخانه برای برنامه های Vue.js است. این ابزار همچنین با افزونهی رسمی devools Vue ادغام می شود.
بیایید با یک برنامهی شمارندهی ساده در vue شروع کنیم:
این یک برنامه با سه بخش زیر است:
این یک نمایش ساده از مفهوم "جریان یکطرفهی داده" است:
با این حال ، وقتی چندین مؤلفه با یک 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 به خوبی سر خواهید کرد.