Vuex Modules 模組化提升 store 的維護性

為什麼要使用 Vuex Modules？

隨著應用程式的增長，Vuex 的 store 會變得越來越大，維護和管理會變得困難。使用 Modules 可以將 store 拆分為不同的模組，每個模組管理自己的狀態、變更和行為，這樣可以提高可維護性和可讀性。

如何使用 Vuex Modules？

專案結構圖

以下是我的專案結構圖：

創建多個 Module

首先，我們可以創建模組的 JavaScript 檔案，例如 userModule.js 和 productModule.js。

// store/userModule.js
const state = {
  user: null,
};

const mutations = {
  SET_USER(state, user) {
    state.user = user;
  },
};

const actions = {
  fetchUser({ commit }) {
    // 模擬獲取使用者資料
    const userData = [
      { name: 'John Doe', age: 16 },
      { name: 'Sam Hu', age: 22 },
      { name: 'Nick Chang', age: 56 },
      { name: 'Mink Wu', age: 35 },
    ];
    const userInfo = userData[Math.floor(Math.random() * userData.length)];
    commit('SET_USER', userInfo);
  },
};

const getters = {
  user: (state) => state.user,
};

export default {
  namespaced: true, // 加上這行使得這個模組的 getters, actions 和 mutations 不會跟其他模組衝突
  state,
  mutations,
  actions,
  getters,
};

// store/productModule.js
const state = {
  product: null,
};

const mutations = {
  SET_PRODUCT(state, product) {
    state.product = product;
  },
};

const actions = {
  fetchProduct({ commit }) {
    // 模擬獲取產品資料
    const productData = [
      { id: 1, name: 'Product A' },
      { id: 2, name: 'Product B' },
      { id: 3, name: 'Product C' },
      { id: 4, name: 'Product D' },
    ];
    const product = productData[Math.floor(Math.random() * productData.length)];
    commit('SET_PRODUCT', product);
  },
};

const getters = {
  product: (state) => state.product,
};

export default {
  namespaced: true, // 加上這行使得這個模組的 getters, actions 和 mutations 不會跟其他模組衝突
  state,
  mutations,
  actions,
  getters,
};

在主 Store 中引入模組

接下來，我們需要在主 store 中引入我們的模組。

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import userModule from './userModule';
import productModule from './productModule';

Vue.use(Vuex);

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production', // 嚴謹模式：只在開發環境下啟用
  modules: {
    userModule,
    productModule,
  },
});

整合多個 module 在頁面上

<template>
  <div>
    <h1>User Information</h1>
    <p>Name: {{ user?.name }}</p>
    <p>Age: {{ user?.age }}</p>
    <button type="button" @click="fetchUser">Fetch User</button>

    <h1>Product List</h1>
    <ul>
      <li>
        <div>ID：{{ product?.id }}</div>
        <div>Name：{{ product?.name }}</div>
      </li>
    </ul>
    <button type="button" @click="fetchProduct">Fetch Product</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapGetters({
      user: 'userModule/user',
      product: 'productModule/product',
    }),
  },
  methods: {
    ...mapActions({
      fetchUser: 'userModule/fetchUser',
      fetchProduct: 'productModule/fetchProduct',
    }),
  },
  mounted() {
    this.fetchUser();
    this.fetchProduct();
  },
};
</script>

範例結果圖

總結

使用 Vuex 的 modules 功能可以讓我們的狀態管理更具結構性和可讀性。每個模組可以專注於特定的功能，使得應用程式在擴展時能夠更輕鬆地進行維護和調整。這樣的設計不僅提高了代碼的可重用性，還可以讓測試與除錯變得更加方便。