微前端子应用如何共享主应用的全局状态？

在 WordPress 里做这种跨框架状态共享还真有点折腾，不过我倒是有几个靠谱的思路。

首先别把 store 直接挂到 window 上，这样确实容易丢失响应性。建议用自定义事件来同步状态变化。主应用可以在 Vue3 的 watch 里监听用户信息的变化，然后通过 dispatchEvent 发布事件。

window.addEventListener('main-state-change', (e) => {

  const { key, value } = e.detail;

  // React 子应用更新对应的状态

});



// 在 Vue 主应用里

watch(userStore, (newVal) => {

  const event = new CustomEvent('main-state-change', {

    detail: { key: 'userInfo', value: newVal }

  });

  window.dispatchEvent(event);

});

或者直接用 postMessage API 来做父子应用通信，特别是如果你的子应用是运行在一个 iframe 里的话。这种方式更稳定一些。

如果觉得麻烦，考虑引入一个轻量级的消息总线库比如 mitt，在主题里加个全局实例，让各个应用都能订阅和发布消息。

这两种方式我都试过，自定义事件适合简单场景，postMessage 更适合复杂一点的应用架构。记得处理好内存泄漏的问题，毕竟我们都是被 JavaScript 内存问题坑过的老司机了。

这个问题挺常见的，跨框架共享状态确实是微前端的一个痛点。

问题本质：你把 Pinia 的值复制了一份挂到 window 上，这只是个快照，Vue 的响应式系统根本不知道外部谁在用，自然不会通知你更新。

推荐方案：自定义事件 + 手动同步

主应用这边，暴露 store 实例，然后在状态变化时发事件通知：

// main-app main.js

import { createPinia } from 'pinia'

import { useUserStore } from '@/stores/user'



const pinia = createPinia()

const userStore = useUserStore(pinia)



// 暴露 store 实例

window.mainStore = userStore



// 监听 store 变化，通知子应用

userStore.$subscribe((mutation, state) => {

  window.dispatchEvent(new CustomEvent('main-store-update', {

    detail: {

      userInfo: state.userInfo,

      token: state.token

    }

  }))

})



export { userStore }

React 子应用那边，监听事件并更新自己的状态：

// react-child App.jsx

import { useState, useEffect } from 'react'



function App() {

  const [userInfo, setUserInfo] = useState(null)



  useEffect(() => {

    // 初始化时尝试读取

    if (window.mainStore) {

      setUserInfo(window.mainStore.userInfo)

    }



    // 监听主应用状态变化

    const handleStoreUpdate = (event) => {

      setUserInfo(event.detail.userInfo)

    }



    window.addEventListener('main-store-update', handleStoreUpdate)

    

    return () => {

      window.removeEventListener('main-store-update', handleStoreUpdate)

    }

  }, [])



  return 
用户: {userInfo?.name}


}

另一个更优雅的方案：用 reactive 包装

如果你想 React 那边直接读值也能响应式，可以把 store 状态用 Vue 的 reactive 包一下：

// 主应用

import { reactive, toRefs } from 'vue'



const storeState = reactive({

  userInfo: null,

  token: null

})



// 同步 Pinia 状态到 reactive 对象

const userStore = useUserStore()

userStore.$subscribe(() => {

  storeState.userInfo = userStore.userInfo

  storeState.token = userStore.token

})



window.mainState = storeState

这样 React 那边读 window.mainState.userInfo 虽然不是真正的响应式，但配合上面的事件机制能做到状态同步。

刷新丢失的问题：子应用加载时主应用可能已经就绪了，所以子应用初始化时直接取 window.mainStore 就能拿到当前状态。刷新丢失是因为子应用重新加载时主应用还在，你初始化时读取一下就行。

简单粗暴法：如果就几个字段，直接在主应用暴露一个 getter 函数，window.getUserInfo = () => userStore.userInfo，子应用需要时调用一下获取最新值，省心省力。

这几种方案都能解决问题，看你团队喜欢哪种风格。个人建议用自定义事件这套，逻辑清晰，出问题也容易排查。