在Nuxt中如何跨Vuex模块访问或修改另一个模块的state状态？

算力阿峰

2026-10-5

你遇到的问题有两个核心原因：

Vuex 中 mutations 函数仅接收当前模块 state 作为第一参数、payload 作为第二参数，不支持直接获取 rootState，rootState 仅可在 actions、getters 中访问，你在 mutations 里解构 rootState 本身就无法获取到有效值。
Nuxt 会自动按 store 目录下的文件名注册 Vuex 模块，所以 ModuleA 的 state 挂载路径为 rootState.ModuleA.eventType，你直接访问 rootState.eventType 路径错误。

解决方法1：将逻辑迁移到 actions 实现（推荐）

校验类业务逻辑本身就适合放在 actions 中实现，mutations 仅负责同步修改 state 即可，修改后的 ModuleB 代码如下：

// store/modules/ModuleB.js
export const state = () => ({
  input: {}
})

export const mutations = {
  setInput(state, payload) {
    state.input = payload
  }
}

export const actions = {
  jsonPreparation({ state, rootState, commit }, payload) {
    // 此处可正常获取 ModuleA 的运行时 state
    console.log(rootState.ModuleA.eventType)
    // 你的校验逻辑写在这里
    if (rootState.ModuleA.eventType === '符合要求的枚举值') {
      commit('setInput', payload)
    }
  }
}

解决方法2：强制在 mutations 中访问（不推荐）

如果确实有特殊需求要在 mutations 中获取其他模块 state，可以在调用 mutation 时将对应值作为 payload 的一部分传入：

// 调用 mutation 时传入 ModuleA 的 state 值
this.$store.commit('ModuleB/jsonPreparation', {
  data: yourPayload,
  eventType: this.$store.state.ModuleA.eventType
})

// 对应的 ModuleB mutation 调整为
export const mutations = {
  jsonPreparation (state, { data, eventType }) {
    console.log(eventType)
    // 你的业务逻辑
  }
}