Vuexストアのモジュール化による大規模アプリケーションの管理

src/
├── store/
│   ├── index.js
│   ├── modules/
│   │   ├── user.js
│   │   ├── product.js
│   │   ├── cart.js

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

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

const actions = {
  login({ commit }, user) {
    commit('SET_USER', user);
  }
};

const getters = {
  isAuthenticated: state => !!state.user
};

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

// store/index.js
import { createStore } from 'vuex';
import user from './modules/user';
import product from './modules/product';
import cart from './modules/cart';

export default createStore({
  modules: {
    user,
    product,
    cart
  }
});

// 名前空間付きのアクション呼び出し
store.dispatch('user/login', userData);

// store/modules/cart.js
const actions = {
  addToCart({ commit, rootState }, productId) {
    const product = rootState.product.items.find(p => p.id === productId);
    commit('ADD_TO_CART', product);
  }
};

// 動的モジュール登録
store.registerModule('dynamicModule', {
  state: { value: 0 },
  mutations: { increment(state) { state.value++ } }
});

// user.test.js
import user from '@/store/modules/user';

test('SET_USER mutation works', () => {
  const state = { user: null };
  user.mutations.SET_USER(state, { name: 'John' });
  expect(state.user.name).toBe('John');
});

// Vue DevToolsで確認可能
console.log(store.state.user.user);