مدیریت حالت در Vue.js

مقدمه

مدیریت حالت به معنای کنترل و نگهداری داده‌هایی است که بین کامپوننت‌های مختلف اپلیکیشن به اشتراک گذاشته می‌شود. هر اپلیکیشن Vue.js نیاز به مدیریت اطلاعاتی مثل داده‌های کاربر، محتوای فرم‌ها، و تنظیمات صفحه دارد.

چرا مدیریت حالت مهم است؟

مشکلات بدون مدیریت حالت:

Prop Drilling: انتقال داده‌ها از کامپوننت والد به نوه از طریق تمام کامپوننت‌های میانی که به آن داده‌ها نیاز ندارند.

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

عدم همگام‌سازی: کامپوننت‌های مختلف که به یک داده وابسته‌اند، ممکن است به‌روزرسانی نشوند.

راه‌حل‌ها

مدیریت حالت این مشکلات را با ایجاد یک منبع واحد حقیقت (Single Source of Truth) و جریان یک‌طرفه داده‌ها حل می‌کند.

راه‌حل‌های Vue.js

1. قابلیت‌های داخلی Vue

Vue دارای سیستم reactive قدرتمندی است که برای اکثر پروژه‌ها کافی است:

// داده‌های ساده
const count = ref(0);

// آبجکت‌های پیچیده  
const state = reactive({
  user: { name: "کاربر" },
  items: []
});

2. Computed Properties

برای محاسبه مقادیر بر اساس داده‌های دیگر:

const fullName = computed(() => 
  `${firstName.value} ${lastName.value}`
);

3. Watchers

برای نظارت بر تغییرات و انجام عملیات جانبی:

watch(searchTerm, async (newTerm) => {
  if (newTerm.length > 2) {
    results.value = await search(newTerm);
  }
});

4. Composables

برای استفاده مجدد منطق در کامپوننت‌های مختلف:

export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
}

کتابخانه‌های تخصصی

Vuex (قدیمی)

Vuex بر اساس چهار مفهوم کار می‌کند:

• State: نگهداری داده‌ها

• Getters: محاسبه مقادیر مشتق‌شده

• Mutations: تغییرات همزمان

• Actions: عملیات ناهمزمان

Pinia (مدرن)

Pinia جایگزین رسمی Vuex است با ویژگی‌های بهتر:

• ساده‌تر از Vuex

• پشتیبانی بهتر از TypeScript

• عدم نیاز به Mutations

• سازگاری کامل با Composition API

export const useStore = defineStore('main', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ }
  }
});

انتخاب روش مناسب

پروژه‌های کوچک (کمتر از ۱۰ کامپوننت)

از قابلیت‌های داخلی Vue استفاده کنید:

export const store = reactive({
  user: null,
  setUser(user) { this.user = user }
});

پروژه‌های متوسط (۱۰-۵۰ کامپوننت)

Pinia با معماری ماژولار:

export const useUserStore = defineStore('user', {
  state: () => ({ profile: null }),
  actions: {
    async fetchProfile() {
      this.profile = await api.getProfile();
    }
  }
});

پروژه‌های بزرگ (۵۰+ کامپوننت)

استفاده از الگوهای پیشرفته با Lazy Loading

بهترین روش‌ها

عملکرد

• استفاده از shallowRef برای داده‌های بزرگ

• Lazy Loading برای store های سنگین

• Cleanup مناسب event listener ها

تست

• تست واحد store ها

• Mock کردن API calls

• تست یکپارچگی کامپوننت‌ها

نگهداری کد

• تقسیم store های بزرگ به ماژول‌های کوچک

• استفاده از TypeScript برای type safety

• مستندسازی actions و state

مهاجرت از Vuex به Pinia

مراحل کلی:

1. نصب Pinia در کنار Vuex

2. تبدیل تدریجی ماژول‌ها

3. به‌روزرسانی کامپوننت‌ها

نتیجه‌گیری

انتخاب روش مدیریت حالت بستگی به اندازه و پیچیدگی پروژه دارد:

• پروژه‌های ساده: قابلیت‌های داخلی Vue

• پروژه‌های متوسط: Pinia با store های ماژولار

• پروژه‌های پیچیده: الگوهای Enterprise و بهینه‌سازی‌های پیشرفته

مهم‌ترین نکته این است که از ساده شروع کنید و تنها زمانی به راه‌حل‌های پیچیده‌تر بروید که واقعاً نیاز دارید. Vue.js ابزارهای مناسبی برای هر مرحله از رشد پروژه فراهم کرده است.