Lewati ke konten utama

🧩 Vuex Modules

Ketika aplikasi Vue berkembang, satu file store/index.js saja bisa menjadi sangat besar. Untuk menghindari kekacauan, Vuex mendukung modularisasi state melalui fitur Modules.

📦 1. Mengapa Menggunakan Modules?​

  • Memisahkan fitur ke dalam unit (misal: auth, cart, user)
  • Mempermudah maintenance dan skalabilitas
  • Menghindari konflik nama di state, mutations, actions, dan getters

🗂️ 2. Struktur Folder Modular​

src/ ├── store/ │ ├── index.js │ └── modules/ │ ├── auth.js │ └── cart.js

⚙️ 3. Contoh Modul: auth.js​

// store/modules/auth.js
const state = () => ({
  user: null,
  token: null
});

const mutations = {
  setUser(state, user) {
    state.user = user;
  },
  setToken(state, token) {
    state.token = token;
  }
};

const actions = {
  login({ commit }, payload) {
    // simulasi login
    commit('setUser', payload.user);
    commit('setToken', payload.token);
  }
};

const getters = {
  isAuthenticated(state) {
    return !!state.token;
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
};

🧩 4. Register Module di store/index.js​

import Vue from 'vue';
import Vuex from 'vuex';
import auth from './modules/auth';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    auth
  }
});

🧑‍💻 5. Mengakses State & Action dari Modul​

a. State & Getter​

this.$store.state.auth.user
this.$store.getters['auth/isAuthenticated']

b. Commit Mutation​

this.$store.commit('auth/setUser', user)

c. Dispatch Action​

this.$store.dispatch('auth/login', payload)

🧠 Karena modul menggunakan namespaced: true, kita perlu menyebutkan nama modul saat mengaksesnya.

✅ 6. Modul Bersarang​

Vuex mendukung nested modules:

modules: {
  cart: {
    namespaced: true,
    modules: {
      promo: {
        namespaced: true,
        state: { ... },
        // akses: cart/promo/...
      }
    }
  }
}

🔍 7. Tips Modul Vuex​

  • Gunakan 1 modul untuk 1 fitur: auth, products, orders, dll

  • Gunakan helper seperti mapState, mapActions untuk mempermudah binding

  • Gunakan namespace untuk mencegah konflik dan akses lebih terstruktur