Vue.js-کابردها-کتابخانه جاوااسکریپتدوره رایگان-الگوریتم اول-free-آموزش کامل

لطفا صبر کنید...

معرفی Vuex برای مدیریت وضعیت در Vue.js

Vuex یک کتابخانه مدیریت وضعیت (State Management) در Vue.js است که به ما کمک می‌کند داده‌ها را در یک مکان متمرکز نگه داریم و بین کامپوننت‌ها به اشتراک بگذاریم.

1. چرا از Vuex استفاده کنیم؟

در برنامه‌های کوچک، می‌توان داده‌ها را با props و emit بین کامپوننت‌ها رد و بدل کرد. اما در پروژه‌های بزرگ که چندین کامپوننت نیاز به استفاده از یک داده مشترک دارند، این روش مشکل‌ساز می‌شود. Vuex این مشکل را حل می‌کند.

2. نصب Vuex

در Vue 3، نسخه جدید Vuex (Vuex 4) را نصب کنید:

npm install vuex@next

3. ایجاد Store در Vuex

یک فایل جدید به نام store.js در پوشه src ایجاد کنید و Vuex را در آن تنظیم کنید:

import { createStore } from "vuex";

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit("increment");
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

4. اضافه کردن Store به Vue App

حالا store.js را در main.js ایمپورت کرده و به برنامه متصل کنید:

import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";

const app = createApp(App);
app.use(store);
app.mount("#app");

5. استفاده از Vuex در یک کامپوننت

حالا Vuex را در یک کامپوننت استفاده می‌کنیم:

<template>
  <div>
    <p>مقدار شمارنده: {{ count }}</p>
    <p>دو برابر مقدار شمارنده: {{ doubleCount }}</p>
    <button @click="increment">افزایش</button>
    <button @click="incrementAsync">افزایش (با تأخیر)</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

export default {
  computed: {
    ...mapState(["count"]),
    ...mapGetters(["doubleCount"])
  },
  methods: {
    ...mapMutations(["increment"]),
    ...mapActions(["incrementAsync"])
  }
};
</script>

6. توضیح بخش‌های مهم Vuex

🔹 state:

مکانی برای نگهداری داده‌های سراسری.

state() {
  return { count: 0 };
}

🔹 mutations:

تابع‌هایی که می‌توانند state را تغییر دهند. فقط باید به‌صورت همگام (synchronous) اجرا شوند.

mutations: {
  increment(state) {
    state.count++;
  }
}

🔹 actions:

شبیه به mutations اما می‌توانند به‌صورت غیرهمگام (async) اجرا شوند.

actions: {
  incrementAsync({ commit }) {
    setTimeout(() => {
      commit("increment");
    }, 1000);
  }
}

🔹 getters:

برای پردازش داده‌های موجود در state و برگرداندن مقدار جدید.

getters: {
  doubleCount(state) {
    return state.count * 2;
  }
}

7. استفاده از Namespaced Modules در Vuex

برای سازماندهی بهتر، می‌توان ماژول‌ها را در Vuex ایجاد کرد:

const counterModule = {
  namespaced: true,
  state: () => ({ count: 0 }),
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit("increment");
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
};

const store = createStore({
  modules: {
    counter: counterModule
  }
});

export default store;

در کامپوننت:

computed: {
  ...mapState("counter", ["count"]),
  ...mapGetters("counter", ["doubleCount"])
},
methods: {
  ...mapMutations("counter", ["increment"]),
  ...mapActions("counter", ["incrementAsync"])
}