Vuex模块化需设namespaced: true实现命名空间隔离，组件中通过map系列函数传模块名调用，跨模块访问需用rootState/rootGetters。

Vue2 中用 Vuex 的 modules 实现命名空间模块化，核心是把大状态按业务拆开、加 namespaced: true 避免冲突，并在组件中用带命名空间的方式调用。不加命名空间时所有模块的 mutation/action/getter 全局平铺，容易重名覆盖；加了之后就变成 模块名/xxx 的路径式访问，结构清晰也安全。

模块定义：每个文件一个模块，必须设 namespaced

每个模块单独导出对象，namespaced: true 是关键开关，否则起不到隔离作用：

• store/modules/user.js：

  export default {
    namespaced: true,
    state: { name: '', token: '' },
    mutations: {
      SET_USER(state, payload) { state.name = payload.name }
    },
    actions: {
      login({ commit }, user) { commit('SET_USER', user) }
    },
    getters: {
      isLogin: state => !!state.token
    }
  }

• store/modules/cart.js：

  export default {
    namespaced: true,
    state: { list: [] },
    mutations: {
      ADD_ITEM(state, item) { state.list.push(item) }
    }
  }

注册模块：统一导入 modules 目录，自动合并

store/index.js 中不再手动罗列每个模块，推荐用 require.context 或直接 import 后聚合：

• 简洁写法（推荐）：

  import Vue from 'vue'
  import Vuex from 'vuex'
  import user from './modules/user'
  import cart from './modules/cart'
  
  Vue.use(Vuex)
  
  export default new Vuex.Store({
    modules: { user, cart }
  })

• 如果模块多，可建 store/modules/index.js 统一导出：

  const modules = {}
  const files = require.context('.', false, /\.js$/)
  files.keys().forEach(key => {
    if (key === './index.js') return
    modules[key.replace(/\.\/(.*)\.js/, '$1')] = files(key).default
  })
  export default modules

  然后 modules: import('./modules') 即可。

组件中使用：map 系列辅助函数要传命名空间名

开启命名空间后，不能直接用 mapState(['name'])，必须指定模块名：

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

立即学习“前端免费学习笔记（深入）”；

• 读取 state 或 getters：

  import { mapState, mapGetters } from 'vuex'
  export default {
    computed: {
      // 方式一：数组写法，只传字段名（需配合第一个参数指定模块）
      ...mapState('user', ['name', 'token']),
      ...mapGetters('user', ['isLogin']),
  
      // 方式二：对象写法，可重命名
      ...mapState('user', { userName: 'name' }),
      ...mapGetters('cart', { cartCount: 'itemCount' })
    }
  }

• 触发 action 或 mutation：

  import { mapActions, mapMutations } from 'vuex'
  export default {
    methods: {
      // 调用 user 模块的 login action
      ...mapActions('user', ['login']),
      
      // 调用 cart 模块的 ADD_ITEM mutation（注意命名空间内 mutation 不支持 mapMutations 简写，需显式 commit）
      addItem(item) {
        this.$store.commit('cart/ADD_ITEM', item)
      }
    }
  }

跨模块访问：用 rootState 和 rootGetters

模块内部需要读其他模块的状态或 getter 时，不能直接用 getters 或 state，得靠上下文参数：

• 在 user 模块的 action 中读 cart 的数量：

  actions: {
        login({ commit, rootState }, user) {
          console.log('购物车当前有', rootState.cart.list.length)
          commit('SET_USER', user)
        }
      }

• 在 user 模块的 getter 中复用 cart 的计算逻辑：

  getters: {
        profileSummary(state, getters, rootState, rootGetters) {
          const cartTotal = rootGetters['cart/totalPrice']
          return `${state.name} | 购物车金额：¥${cartTotal}`
        }
      }

命名空间不是可选项，而是模块化落地的必需设置。只要模块间存在同名 mutation 或 getter，就必须启用它；而一旦启用，组件和模块内部的调用方式就要同步调整——看似多写几个字符串，换来的是长期可维护性。