Vuex چیست؟ (معرفی و شروع به کار با آن)

فرض کن یه اپلیکیشن 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 کار کردی؟ تجربیاتت رو توی کامنت ها بنویس تا بیشتر گپ بزنیم! 😊