跨模块是指在当前模块调用其他模块的mutations或actions对象的属性或方法，通常情况下在比较大型的项目用的比较多，上源码：
store目录下分别有a.js和b.js两个模块文件，分别引入index.js文件，并定义模块名称为大写的A和B。
模块A：store/modules/a.js

const state = {
    a_name: "A模块"
};
const getters = {}
const mutations = {
    SET_NAME(state, value){
        state.a_name = value;
    }
}
const actions = {}
export default {
    namespaced: true, state, getters, mutations, actions
};    

模块B：store/modules/b.js

const state = {
    b_name: "B模块"
};
const getters = {}
const mutations = {
    SET_NAME(state, value){
        state.b_name = value;
    }
}
const actions = {
    updateName({ commit }, payload){
        commit("SET_NAME", payload)
    }
}
export default {
    namespaced: true, state, getters, mutations, actions
};    

将模块A和模块B引入Store：store/index.js

import { createStore } from "vuex";
// 引用模块文件
import A from "./modules/a.js";
import B from "./modules/b.js";
// 创建Vuex
export default createStore({
  modules: { // 模块化
    A,       // 载入 app 模块
    B
  }
});

模块文件定义完成，便可通过vue的computed对象监听，读取模块A和模块B的a_name和b_name属性渲染视图。

<template>
  <div>
    <p>模块A：{{ a_name }}</p>
    <p>模块B：{{ b_name }}</p>
    <button type="button" @click="updateDate">更新数据</button>
  </div>
</template>

<script>
import { computed } from "vue";
import { useStore } from "vuex";
export default {
  name: "Home",
  setup(){
    const store = useStore()
    const a_name = computed(() => store.state.A.a_name)
    const b_name = computed(() => store.state.B.b_name)
    const updateDate = () => {
      store.dispatch("B/updateName", "更新了模块B的a_name")
    }
    return {
      a_name,
      b_name,
      updateDate
    }
  }
};
</script>

DOM元素button绑定了@click单击事件触发updateDate方法，updateDate方法中调用了模块B的actions对象的updateName方法。因为updateName方法调用了commit(“SET_NAME”, payload)，所以模块B的b_name会被更新。
如果要在模块B调用模块A的方法，只需要在updateName增加模块A的命名空间便可。
模块B：store/modules/b.js

const actions = {
    updateName({ commit }, payload){
        commit("SET_NAME", payload)
        commit("A/SET_NAME", "这里更新模块A的a_name", { root: true })
    }
}

模块B的actions对象的updateName方法添加了

commit(“A/SET_NAME”, “这里更新模块A的a_name”, { root: true })

第一个参数携带了模块A的命名空间，第二个参数是值，重点在于第三个参数**{ root: true }**，添加了root:true，则表示开放权限模块A的权限，否则无法实现跨模块调用方法。
视频讲解：Vuex跨模块调用方法
关注手把手撸码前端：http://www.web-jshtml.cn