Module基础 #

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

// 访问模块状态
store.state.a  // moduleA 的状态
store.state.b  // moduleB 的状态

// 模块定义
const userModule = {
  state: () => ({
    profile: null,
    token: null
  }),
  
  mutations: {
    SET_PROFILE(state, profile) {
      state.profile = profile
    },
    SET_TOKEN(state, token) {
      state.token = token
    }
  },
  
  actions: {
    async fetchProfile({ commit }) {
      const profile = await api.fetchProfile()
      commit('SET_PROFILE', profile)
    }
  },
  
  getters: {
    isLoggedIn: state => !!state.token,
    userName: state => state.profile?.name || 'Guest'
  }
}

const cartModule = {
  state: () => ({
    items: []
  }),
  
  mutations: {
    ADD_ITEM(state, item) {
      state.items.push(item)
    },
    CLEAR_CART(state) {
      state.items = []
    }
  },
  
  getters: {
    itemCount: state => state.items.length,
    total: state => state.items.reduce((sum, item) => sum + item.price, 0)
  }
}

// 组合模块
const store = createStore({
  modules: {
    user: userModule,
    cart: cartModule
  }
})

// 访问 user 模块的状态
this.$store.state.user.profile
this.$store.state.user.token

// 访问 cart 模块的状态
this.$store.state.cart.items

// 调用 mutation
this.$store.commit('SET_PROFILE', profile)  // 全局调用

// 分发 action
this.$store.dispatch('fetchProfile')  // 全局调用

// 访问 getter
this.$store.getters.isLoggedIn
this.$store.getters.itemCount

store/
├── index.js          # 入口文件，组装模块
├── mutation-types.js # Mutation 常量
└── modules/
    ├── user.js       # 用户模块
    ├── cart.js       # 购物车模块
    └── products.js   # 产品模块

// store/modules/user.js
import * as types from '../mutation-types'

const state = () => ({
  profile: null,
  token: null,
  loading: false,
  error: null
})

const mutations = {
  [types.SET_PROFILE](state, profile) {
    state.profile = profile
  },
  
  [types.SET_TOKEN](state, token) {
    state.token = token
  },
  
  [types.SET_LOADING](state, loading) {
    state.loading = loading
  },
  
  [types.SET_ERROR](state, error) {
    state.error = error
  }
}

const actions = {
  async login({ commit }, credentials) {
    commit(types.SET_LOADING, true)
    
    try {
      const { user, token } = await api.login(credentials)
      commit(types.SET_PROFILE, user)
      commit(types.SET_TOKEN, token)
      return user
    } catch (error) {
      commit(types.SET_ERROR, error.message)
      throw error
    } finally {
      commit(types.SET_LOADING, false)
    }
  },
  
  logout({ commit }) {
    commit(types.SET_PROFILE, null)
    commit(types.SET_TOKEN, null)
  }
}

const getters = {
  isLoggedIn: state => !!state.token,
  userName: state => state.profile?.name || 'Guest',
  userEmail: state => state.profile?.email || ''
}

export default {
  namespaced: true,  // 推荐开启命名空间
  state,
  mutations,
  actions,
  getters
}

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

export default createStore({
  modules: {
    user,
    cart,
    products
  },
  
  // 全局状态（可选）
  state: {
    appLoading: false,
    appError: null
  }
})

const store = createStore({
  modules: {
    account: {
      namespaced: true,
      
      state: () => ({ ... }),
      mutations: { ... },
      actions: { ... },
      getters: { ... },
      
      modules: {
        // 嵌套模块
        posts: {
          namespaced: true,
          state: () => ({ ... }),
          mutations: { ... }
        },
        comments: {
          namespaced: true,
          state: () => ({ ... }),
          mutations: { ... }
        }
      }
    }
  }
})

// 访问嵌套模块状态
store.state.account.posts
store.state.account.comments

function createCounterModule(initialValue = 0) {
  return {
    namespaced: true,
    
    state: () => ({
      count: initialValue
    }),
    
    mutations: {
      INCREMENT(state) {
        state.count++
      },
      DECREMENT(state) {
        state.count--
      },
      SET_COUNT(state, value) {
        state.count = value
      }
    },
    
    actions: {
      increment({ commit }) {
        commit('INCREMENT')
      },
      decrement({ commit }) {
        commit('DECREMENT')
      }
    },
    
    getters: {
      doubleCount: state => state.count * 2
    }
  }
}

// 使用可重用模块
const store = createStore({
  modules: {
    counterA: createCounterModule(10),
    counterB: createCounterModule(20)
  }
})

// 创建 store 时注册
const store = createStore({
  modules: {
    user: userModule,
    cart: cartModule
  }
})

// 创建 store 后注册
store.registerModule('products', {
  state: () => ({ items: [] }),
  mutations: {
    SET_ITEMS(state, items) {
      state.items = items
    }
  }
})

// 访问动态注册的模块
store.state.products

// 卸载模块
store.unregisterModule('products')

export default {
  namespaced: true,  // 推荐
  state,
  mutations,
  actions,
  getters
}

modules: {
  user,       // 用户相关
  cart,       // 购物车相关
  products,   // 产品相关
  orders,     // 订单相关
  ui          // UI 状态
}

// 推荐：模块独立，通过 action 通信
// user 模块
actions: {
  async login({ dispatch }) {
    // 登录成功后获取购物车
    await dispatch('cart/fetchCart', null, { root: true })
  }
}

// 不推荐：直接访问其他模块状态
actions: {
  login({ rootState }) {
    const cart = rootState.cart  // 耦合度高
  }
}