微前端中多个Vue子应用如何安全共享Vuex状态而不冲突？

百里毓琳提问于 2026-02-10 16:54:24 阅读 15

前端

我在用Single-SPA搭建微前端时遇到问题：有两个Vue子应用需要共享用户登录状态，尝试在父应用通过Vuex持久化存储，但发现状态会被另一个子应用覆盖，这是为什么呢？

我在父应用store.js设置了命名空间：


const store = new Vuex.Store({
  modules: {
    user: {
      namespaced: true,
      state: { token: localStorage.getItem('token') }
    }
  }
})

子应用通过this.$store访问时，发现修改token后另一个子应用的状态也同步变化。试过在子应用单独初始化store，但又会导致状态丢失。应该怎么设计才能让多个子应用安全共享部分状态呢？

我来解答赞 3 收藏

反馈

1 条解答

欧阳冰可 Lv1

主应用里把 Vuex 实例通过 props 传给子应用，子应用挂载时用 store 选项接入，别自己 new Store。状态统一在主应用管理，子应用只读写不初始化。

let store = new Vuex.Store({

  modules: {

    user: {

      namespaced: true,

      state: { token: localStorage.getItem('token') },

      mutations: {

        SET_TOKEN(state, token) {

          state.token = token

          localStorage.setItem('token', token)

        }

      }

    }

  }

})



// 子应用加载时

const app = new Vue({

  store, // 直接复用主应用 store

  render: h => h(App)

}).$mount('#app')

命名空间只是隔离模块，store 还是同一个实例，所以会互相影响。你想让两个子应用共享又不冲突，只能走主应用中转，差不多就行。

2026-02-10 17:02