فرض کن یه اپلیکیشن Vue ساختی و اوضاع اولش خیلی خوب پیش می‌ره. داده‌ها رو بین چند تا کامپوننت جابه‌جا می‌کنی و همه‌چی عالیه. اما کم‌کم وقتی اپلیکیشنت بزرگ‌تر می‌شه، اوضاع پیچیده‌تر می‌شه. باید داده‌های مشترک رو بین چند کامپوننت مدیریت کنی، تغییرات رو هماهنگ نگه داری و از سردرگمی جلوگیری کنی. تو این شلوغی، به یه ابزار حرفه‌ای نیاز داری که همه این کارها رو برات راحت‌تر کنه.

اینجاست که Vuex وارد می‌شه، یه افزونه قدرتمند برای Vue که کمک می‌کنه همه اطلاعات و داده‌های اپلیکیشن رو یه جا متمرکز و منظم نگه داری. تو این مقاله قراره Vuex رو کامل بشناسیم، ساختارش رو بررسی کنیم و یاد بگیریم چطور ازش استفاده کنیم. اگه تازه با Vuex آشنا شدی یا دنبال یه راهنمای جامع برای شروع کار هستی، جای درستی اومدی! 😊

Vuex چیه؟

Vuex یه افزونه (Plugin) برای Vue.js هست که یه مرکز مدیریت داده برای اپلیکیشن درست می‌کنه. داده‌های مختلفی که کامپوننت‌ها لازم دارن، به جای اینکه بین خودشون رد و بدل بشن، توی Vuex ذخیره می‌شن. بعد هر کامپوننت می‌تونه هر وقت لازم داشت، به داده‌ها دسترسی پیدا کنه یا اونا رو تغییر بده.

درواقع این کتابخونه به مدیریت وضعیت (State) توی اپلیکیشن‌های Vue کمک می‌کنه. یه جوری مثل یه انبار مرکزی عمل می‌کنه که همه اطلاعات و داده‌های اپلیکیشن توش جمع می‌شن. از اون طرف، Vuex یه سری قانون هم داره که می‌گه چطوری می‌تونی این داده‌ها رو تغییر بدی.

بذار برات یه مثال بزنم؛ فرض کن یه اپلیکیشن داری که قراره یه سری اطلاعات مشترک رو توی چند تا صفحه یا کامپوننت نشون بده. مثلاً:

• تعداد آیتم‌های سبد خرید.
• وضعیت ورود یا خروج کاربر.
• اطلاعات پروفایل کاربر.

اگه Vuex نباشه، باید این اطلاعات رو بین کامپوننت‌ها به صورت دستی رد و بدل کنی، که هم پیچیده می‌شه، هم ممکنه باگ ایجاد بشه. Vuex کمک می‌کنه این ارتباطات به ساده‌ترین شکل ممکن انجام بشه.

«مدیریت وضعیت» دقیقاً یعنی چی؟

مدیریت وضعیت (State Management) یه مدل یا الگوی خاصه که توی اپلیکیشن استفاده می‌شه. این مدل شامل سه بخش اصلیه:

• State (داده‌ها): اینجا همه اطلاعات اصلی اپلیکیشن ذخیره می‌شه، مثل یه بانک مرکزی برای داده‌ها.
• View (نمایش یا قالب): این همون جاییه که وضعیت (State) به صورت ظاهری به کاربر نشون داده می‌شه. مثل صفحه‌های مختلفی که کاربر می‌بینه.
• Actions (عملیات‌ها): این بخش مسئول واکنش به کارهایی هست که کاربر انجام می‌ده، مثلاً کلیک روی یه دکمه. اینجا تعیین می‌شه که چه تغییری توی داده‌ها باید اتفاق بیفته.

Vuex به چه دردی می‌خوره؟

وقتی یه اپلیکیشن Vue می‌سازی، معمولاً با یه عالمه چالش روبه‌رو می‌شی. مثلاً توی اپلیکیشن‌های تک‌صفحه‌ای (SPAs)، روتینگ، تست‌ها، وب‌ورکرها و غیره. تو این شلوغی، مدیریت درست اطلاعات و ارتباط بین بخش‌های مختلف خیلی سخت می‌شه.

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

چرا Vuex لازمه؟

فرض کن توی اپلیکیشنت چند تا کامپوننت داری که همگی نیاز دارن یه سری اطلاعات مشترک رو بخونن یا تغییر بدن. مثلاً:

• چند تا صفحه که باید یه داده مشترک رو نمایش بدن.
• کاربر روی یه دکمه کلیک می‌کنه و این کار باید داده‌ی یکسانی رو تو چند جای مختلف تغییر بده.

حالا اگه این ارتباطات رو خودت بخوای مدیریت کنی، ممکنه کلاً کنترل اوضاع از دستت در بره. Vuex با جمع کردن این اطلاعات توی یه جای مرکزی، کاری می‌کنه که همه‌چیز مرتب و قابل‌کنترل بشه. به زبان ساده، Vuex کمک می‌کنه داده‌ها همیشه منظم باشن و نمایش اپلیکیشن با داده‌ها هماهنگ بمونه.

اینجاست که می‌فهمی Vuex چقدر می‌تونه کارتو راحت کنه! 😊

تفاوت Vue Instance و Vuex Instance

قبل از اینکه عمیق‌تر به Vuex بپردازیم، بیایم ببینیم Vuex در مقایسه با Vue چه تفاوت‌هایی داره.

Vue Instance

Vuex Instance

خلاصه تفاوت‌ها:

• توی داده‌ها و حالت واکنش‌گرا (Reactive Data and State)، می‌تونیم داده‌های Vue رو با متدهای Vue به‌روز کنیم. از طرف دیگه، توی Vuex این کار از طریق Actions انجام می‌شه.
• Vuex برای دسترسی به داده‌ها از Getters استفاده می‌کنه، ولی Vue Instances از Computed Properties.
• یه فرق مهم اینه که داده‌های Vuex (یعنی Store) علاوه بر دسترسی، قابلیت تغییر متمرکز هم دارن.

ساختار Vuex: چطوری کار می‌کنه؟

Vuex از چند بخش اصلی تشکیل شده که هر کدوم وظیفه خاصی دارن. بیاین این بخش‌ها رو با یه مثال ساده توضیح بدیم:

فرض کن توی اپلیکیشنت یه لیست کارها (to-do list) داری. حالا ببینیم Vuex چطوری به مدیریت این لیست کمک می‌کنه:

1. State: انبار داده‌ها

State جاییه که همه داده‌های اپلیکیشن ذخیره می‌شن. مثلاً لیست کارهای تو توی State نگهداری می‌شه.

مثال:

const state = {
  todos: []
};

2. Getters: دسترسی به داده‌ها

Getters مثل یه پنجره عمل می‌کنن که بهت اجازه می‌دن داده‌های State رو بخونی، بدون اینکه مستقیماً بهش دست بزنی.

مثال:

const getters = {
  allTodos: (state) => state.todos
};

3. Mutations: تغییر داده‌ها

اگه بخوای State رو تغییر بدی، باید از Mutations استفاده کنی. اینجا جاییه که قوانین سخت Vuex اعمال می‌شه: هیچ‌وقت نباید مستقیماً State رو تغییر بدی.

مثال:

const mutations = {
  addTodo(state, todo) {
    state.todos.push(todo);
  }
};

4. Actions: انجام عملیات‌های پیچیده

اگه عملیاتی داری که نیاز به پردازش داره (مثلاً فراخوانی API)، باید از Actions استفاده کنی. Actions می‌تونن Mutations رو صدا بزنن.

مثال:

const actions = {
  async fetchTodos({ commit }) {
    const response = await axios.get('/api/todos');
    commit('setTodos', response.data);
  }
};

5. Modules: تقسیم‌بندی منطقی

اگه اپلیکیشن بزرگی داری، می‌تونی بخش‌های مختلف State رو به صورت ماژولار مدیریت کنی. هر ماژول می‌تونه State، Getters، Mutations و Actions خودش رو داشته باشه.

نصب و شروع به کار با Vuex

حالا که با مفاهیم اصلی آشنا شدی، وقتشه Vuex رو نصب کنیم و توی یه پروژه استفاده کنیم.

1. دانلود مستقیم از طریق CDN

اگه نمی‌خوای Vuex رو نصب کنی و فقط می‌خوای مستقیم از اینترنت بارگذاریش کنی، می‌تونی از لینک زیر استفاده کنی:
Vuex CDN - آخرین نسخه

این لینک همیشه به آخرین نسخه Vuex اشاره می‌کنه. البته اگه می‌خوای نسخه خاصی رو استفاده کنی، مثلاً نسخه 4.0.0، می‌تونی از این لینک استفاده کنی:

https://unpkg.com/vuex@4.0.0/dist/vuex.global.js

بعد از اینکه لینک Vuex رو گرفتی، کافیه فایل Vuex رو بعد از فایل Vue توی پروژت اضافه کنی. مثل این مثال:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

اینجوری Vuex به‌طور خودکار خودش رو روی Vue نصب می‌کنه. راحت و سریع! 

2. نصب Vuex با NPM

اگه از NPM استفاده می‌کنی، می‌تونی Vuex رو با دستور زیر نصب کنی:

npm install vuex@next --save

3. نصب Vuex با Yarn

اگه طرفدار Yarn هستی، این دستور رو بزن:

yarn add vuex@next --save

4. ساخت نسخه توسعه (Dev Build)

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

پروژه Vuex رو کلون کن:

git clone https://github.com/vuejs/vuex.git node_modules/vuex

وارد پوشه Vuex بشو:

cd node_modules/vuex

وابستگی‌ها رو نصب کن:

yarn

نسخه نهایی رو بساز:

yarn build

حالا نسخه توسعه Vuex برای استفاده آمادست! 😊

این چند روش بهت اجازه می‌ده که Vuex رو دقیقاً به روشی که مناسب پروژت هست، نصب و استفاده کنی. پس حالا تصمیم بگیر و دست به کار شو! 

شروع کار با Vuex

برای اینکه با Vuex شروع کنی، باید بدونی مرکز هر اپلیکیشن Vuex، چیزی به اسم Store هست. این Store در واقع یه جعبه‌ست که تمام داده‌ها و اطلاعات (State) اپلیکیشن توش نگهداری می‌شه. اما چی باعث می‌شه Store توی Vuex خاص‌تر از یه شیء ساده و جهانی باشه؟ دوتا چیز مهم:

• واکنش‌پذیری (Reactive بودن): وقتی کامپوننت‌های Vue از Store اطلاعات می‌گیرن، اگه این اطلاعات تغییر کنه، کامپوننت‌ها به طور خودکار و خیلی بهینه آپدیت می‌شن.
• ممنوعیت تغییر مستقیم State: توی Vuex نمی‌تونی مستقیماً داده‌های Store رو تغییر بدی. تنها راه تغییر State، اینه که به‌صورت صریح یه Mutation اجرا کنی. این کار باعث می‌شه تمام تغییرات State قابل ردگیری باشه و بتونی بهتر روند تغییرات اپلیکیشنت رو مدیریت کنی.

ساده‌ترین Store ممکن

اول از همه، مطمئن شو Vuex رو نصب کردی. حالا بیا یه Store ساده بسازیم. کافیه یه شیء ابتدایی به‌عنوان State تعریف کنی و چندتا Mutation برای تغییرش داشته باشی:

import { createApp } from 'vue'
import { createStore } from 'vuex'
// ساخت یه نمونه Store جدید
const store = createStore({
  state () {
    return {
      count: 0 // مقدار اولیه State
    }
  },
  mutations: {
    increment (state) {
      state.count++ // افزایش مقدار count
    }
  }
})
const app = createApp({ /* کامپوننت ریشه شما */ })
// اضافه کردن Store به اپلیکیشن به‌عنوان یک افزونه
app.use(store)

حالا می‌تونی به راحتی به داده‌های State دسترسی داشته باشی و تغییرات رو با استفاده از Mutations اعمال کنی:

store.commit('increment') // اجرای Mutation
console.log(store.state.count) // -> 1

استفاده از Store توی یه کامپوننت Vue

وقتی Store رو به اپلیکیشن Vue اضافه کردی، توی هر کامپوننت می‌تونی از طریق this.$store بهش دسترسی داشته باشی. برای مثال، اینجوری می‌تونی یه Mutation رو از طریق متدهای کامپوننت اجرا کنی:

methods: {
  increment() {
    this.$store.commit('increment') // اجرای Mutation
    console.log(this.$store.state.count) // مقدار جدید رو چاپ کن
  }
}

چرا از Mutation استفاده می‌کنیم؟

خب ممکنه بپرسی چرا مستقیم نمی‌تونیم مقدار store.state.count رو تغییر بدیم. دلیلش اینه که با استفاده از Mutation:

• تغییرات کاملاً قابل ردگیری می‌شن: هر تغییر توی State یه اثر واضح به جا می‌ذاره، که می‌تونیم اون رو بررسی کنیم.
• امکان ابزارهای بهتر: این روش به ما اجازه می‌ده ابزارهای پیشرفته‌ای مثل ثبت تاریخچه تغییرات، گرفتن عکس از State، یا حتی Debug کردن تغییرات به صورت Time Travel رو بسازیم.

استفاده از State توی کامپوننت‌ها

برای دسترسی به State توی کامپوننت‌ها، کافیه State رو به‌عنوان یه خاصیت Computed تعریف کنی. اینجوری همیشه به‌روز و واکنش‌گراست. تغییرات هم با اجرای Mutation انجام می‌شن.

سوالات متداول

1. Vuex چه زمانی ضروریه؟

Vuex زمانی ضروریه که اپلیکیشن بزرگی داری و مدیریت داده‌ها بین کامپوننت‌ها پیچیده می‌شه.

2. آیا می‌شه بدون Vuex پروژه‌های بزرگ ساخت؟

بله، اما مدیریت داده‌ها سخت‌تر و پر از احتمال خطا می‌شه.

3. تفاوت Vuex با ابزارهای مشابه مثل Redux چیه؟

Vuex برای Vue طراحی شده و از قابلیت‌های Vue مثل reactivity استفاده می‌کنه، اما Redux یه ابزار مستقل از فریمورکه.

جمع‌بندی

Vuex ابزاریه که زندگی رو برای توسعه‌دهنده‌های Vue خیلی راحت‌تر می‌کنه. با یادگیری و استفاده درست ازش، می‌تونی پروژه‌های پیچیده‌تری رو مدیریت کنی. حالا نوبت توئه که دست به کار بشی و Vuex رو توی پروژه‌هات پیاده کنی. نظرت چیه؟ آیا تا حالا با Vuex کار کردی؟ تجربیاتت رو توی کامنت‌ها بنویس تا بیشتر گپ بزنیم! 😊