single-spa应用中，子应用如何共享全局变量而不冲突？

子应用间共享变量建议用全局状态管理+window对象结合的方式，不要直接改window属性。
可以试试这个：

// 父应用初始化全局状态

window.shared = {

  user: {},

  setUser: (user) => {

    window.shared.user = user;

    window.dispatchEvent(new CustomEvent('shared-user-changed', { detail: user }));

  }

};



// React子应用里监听

window.addEventListener('shared-user-changed', (e) => {

  console.log('user更新啦:', e.detail);

});

这个问题挺常见的，single-spa架构下确实容易碰到子应用间共享状态的问题。直接用window对象虽然简单，但确实会有数据冲突和沙箱隔离的问题。我来给你详细说一下更规范的解决方案。

### 1. 首先你要明白为什么会出现undefined
single-spa的子应用加载时，可能会因为生命周期不同步导致读不到最新的window变量。比如React子应用可能在Vue子应用设置完window.__shared之前就初始化了，所以拿不到数据。另外，现代浏览器为了性能优化，可能会对子应用进行沙箱隔离，这也会影响全局变量的访问。

### 2. 推荐使用EventEmitter来共享状态
一个更安全的方式是通过事件总线（EventEmitter）来共享状态。这种方式不仅可以避免直接操作window的风险，还能让子应用之间解耦。

#### 具体步骤：

##### (1) 创建一个独立的状态管理模块
你可以单独创建一个JavaScript文件，用来管理全局状态。这个文件会被所有子应用引入。

// sharedState.js

import EventEmitter from 'events'; // Node.js内置的EventEmitter



const eventEmitter = new EventEmitter();



// 存储共享状态

let sharedState = JSON.parse(sessionStorage.getItem('user')) || {};



// 提供获取和设置状态的方法

function setState(newState) {

  sharedState = { ...sharedState, ...newState };

  sessionStorage.setItem('user', JSON.stringify(sharedState)); // 同步到sessionStorage

  eventEmitter.emit('stateChanged', sharedState); // 通知其他应用状态改变了

}



function getState() {

  return sharedState;

}



export { eventEmitter, setState, getState };

##### (2) 在父应用中引入并初始化
确保这个状态管理模块在父应用中被正确加载。

// parent-app.js

import { setState } from './sharedState';



// 初始化用户信息

setState({ user: { name: 'admin' } });

##### (3) 在子应用中监听状态变化
无论是React还是Vue子应用，都可以通过以下方式来获取和监听状态。

**React子应用示例：**

import React, { useEffect, useState } from 'react';

import { eventEmitter, getState } from './sharedState';



function App() {

  const [user, setUser] = useState(getState().user);



  useEffect(() => {

    const onStateChanged = (newState) => {

      setUser(newState.user);

    };



    eventEmitter.on('stateChanged', onStateChanged);



    // 清理监听器

    return () => eventEmitter.off('stateChanged', onStateChanged);

  }, []);



  return (

    


      
User: {user.name}


    


  );

}



export default App;

**Vue子应用示例：**

import { eventEmitter, getState } from './sharedState';



export default {

  data() {

    return {

      user: getState().user,

    };

  },

  created() {

    const onStateChanged = (newState) => {

      this.user = newState.user;

    };



    eventEmitter.on('stateChanged', onStateChanged);



    this.$once('hook:beforeDestroy', () => {

      eventEmitter.off('stateChanged', onStateChanged);

    });

  },

};

### 3. 为什么推荐这种方式？
- **解耦**：子应用不需要直接操作window对象，避免了数据冲突。
- **同步机制**：通过事件通知机制，确保所有子应用都能及时获取最新状态。
- **持久化**：通过sessionStorage保存状态，即使页面刷新也能保留数据。

### 4. 注意事项
- 确保sharedState.js文件被正确打包并暴露给所有子应用。
- 如果你的项目中有跨域问题，可以考虑用postMessage代替事件总线。
- 不要过度依赖全局状态，尽量将状态管理限制在必要的范围。

这样改完之后，React和Vue子应用都能正确读取和更新用户登录状态了。希望这个方案对你有帮助！如果还有疑问，可以继续问。