Webpack5模块联邦下Vue主远程应用共享Vuex状态的方法及报错解决

问题描述 #

我有两个基于Vue的项目：主应用A和远程应用B，二者均使用Vuex做状态管理。尝试实现跨项目状态管理时，已在B中暴露状态管理文件，但在A中导入使用时出现以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'call') - bootstrap

同时疑惑：是否只需暴露远程应用的store文件，再在主应用的store定义文件中导入使用即可？

相关配置代码 #

应用B的webpack.config.js

new ModuleFederationPlugin({
      name: 'app2',
      filename: 'remoteEntry.js',
      exposes: {
        './template': '@/store/template.js',
      },
})

应用B的template.js

const template = {
  namespaced: true,
  // state
  state: { template: {}, validator: {} },
  // mutations
  mutations: {
    init(state, data) {
      state.template = Object.assign({}, data);
    },
    setValidator(state, object) {
      state.validator = object;
    },
    update(state, data) {
      state.template = Object.assign({}, state.template, data);
    },
    clear(state) {
      state = Object.assign(state, {});
    }
  },
  getters: {
    templateData: state => {
      return state.template;
    }
  },
  // actions
  actions: {
    setTemplate({ commit, state }, templateData) {
      commit('init', templateData);
    },
    setValidator({ commit }, object) {
      commit('setValidator', object);
    },
    update({ state, commit, rootState }, templateData) {
      commit('update', templateData);
    }
  },
  clear({ state, commit, rootState, dispatch }) {
    commit('clear');
  }
};

export default template;

应用A的webpack.config.js

new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      remotes: {
        app2: `app2@${devConfig.EA_URL}/remoteEntry.js`,
      },
})

应用A的store/index.js

import template from 'app2/template';
export default new Vuex.Store({
  modules: { template },
});

问题分析与解决 #

错误原因 #

1. 异步加载时机问题：模块联邦的远程模块是异步加载的，但你在主应用store初始化时同步导入了远程模块，导致模块未加载完成就执行初始化，触发bootstrap阶段错误。
2. 远程模块结构错误：应用B的template.js中，clear方法未放在actions对象内部，而是与actions同级，破坏了Vuex模块的标准结构。

解决步骤 #

1. 修复应用B的template.js结构错误

将clear方法移至actions对象内：

const template = {
  namespaced: true,
  state: { template: {}, validator: {} },
  mutations: {
    init(state, data) {
      state.template = Object.assign({}, data);
    },
    setValidator(state, object) {
      state.validator = object;
    },
    update(state, data) {
      state.template = Object.assign({}, state.template, data);
    },
    clear(state) {
      state = Object.assign(state, {});
    }
  },
  getters: {
    templateData: state => {
      return state.template;
    }
  },
  actions: {
    setTemplate({ commit, state }, templateData) {
      commit('init', templateData);
    },
    setValidator({ commit }, object) {
      commit('setValidator', object);
    },
    update({ state, commit, rootState }, templateData) {
      commit('update', templateData);
    },
    // 将clear方法移至actions内部
    clear({ state, commit, rootState, dispatch }) {
      commit('clear');
    }
  }
};

export default template;

2. 主应用A改为异步加载+动态注册Vuex模块

模块联邦远程模块无法同步初始化，需异步加载后动态注册：
修改应用A的store/index.js：

import Vuex from 'vuex';

const store = new Vuex.Store({
  modules: {},
});

// 异步加载远程模块并动态注册
async function registerRemoteModule() {
  try {
    const templateModule = await import('app2/template');
    store.registerModule('template', templateModule.default, {
      namespaced: true
    });
  } catch (err) {
    console.error('加载远程Vuex模块失败:', err);
  }
}

registerRemoteModule();

export default store;

3. 确保主应用入口等待远程模块加载完成

修改应用A的main.js，等待远程模块加载后再挂载应用：

import Vue from 'vue';
import App from './App.vue';
import store from './store';

async function bootstrap() {
  // 等待远程模块加载完成
  await import('app2/template');
  
  new Vue({
    store,
    render: h => h(App)
  }).$mount('#app');
}

bootstrap();

总结 #

不能仅通过暴露store文件并同步导入实现跨项目状态管理，因为模块联邦的远程模块是异步加载的，同步导入会导致初始化时机错误。必须采用异步加载+动态注册Vuex模块的方式，同时要保证远程模块的结构符合Vuex的标准定义。

内容的提问来源于stack exchange，提问作者kekeee