Garfish 如何实现主应用与子应用之间的通信和状态共享?
Garfish 提供了多种通信机制,支持主应用与子应用之间、以及子应用之间的数据共享和交互。通信方式1. Props 传递适用场景:主应用向子应用传递配置、用户信息等静态数据特点:单向数据流,简单直接示例:// 主应用配置{ name: 'sub-app', entry: '//localhost:3001', props: { userInfo: { name: 'John', role: 'admin' }, theme: 'dark', apiConfig: { baseUrl: '/api' } }}// 子应用接收export function mount(props) { const { userInfo, theme, apiConfig } = props; // 使用传递的数据}2. 事件总线适用场景:跨应用的事件通知和响应特点:解耦应用间依赖,支持一对多通信示例:// 发布事件Garfish.channel.emit('user-login', { userId: 123 });// 订阅事件Garfish.channel.on('user-login', (data) => { console.log('用户登录:', data.userId);});// 取消订阅Garfish.channel.off('user-login', handler);3. 共享状态适用场景:需要跨应用共享的业务状态特点:集中管理,响应式更新示例:// 定义共享状态Garfish.registerShared({ name: 'userStore', store: { state: { user: null }, mutations: { setUser(state, user) { state.user = user; } } }});// 子应用使用export function mount(props) { const userStore = props.shared.userStore; userStore.mutations.setUser({ name: 'John' });}4. 自定义通信协议适用场景:复杂的业务交互逻辑特点:灵活定制,满足特定需求示例:// 定义通信接口Garfish.defineInterface('auth', { login(credentials) { return fetch('/api/login', { method: 'POST', body: JSON.stringify(credentials) }); }, logout() { return fetch('/api/logout'); }});// 子应用调用export function mount(props) { props.auth.login({ username, password });}状态管理最佳实践1. 状态分层全局状态:用户信息、主题、权限等应用级状态:子应用内部状态组件级状态:组件内部状态2. 状态隔离避免直接访问其他应用的状态通过通信机制传递数据保持应用的独立性3. 状态同步使用事件机制同步状态变化实现状态变更通知避免状态不一致问题4. 状态持久化使用 localStorage 或 sessionStorage实现跨会话的状态保持考虑状态恢复机制通信安全考虑1. 数据验证验证接收到的数据格式和内容防止恶意数据注入实现数据校验机制2. 权限控制限制敏感数据的访问实现基于角色的权限控制审计通信日志3. 错误处理完善的错误捕获和处理提供友好的错误提示实现降级方案性能优化1. 减少通信频率合并多个通信请求使用批量更新实现防抖和节流2. 数据缓存缓存常用数据减少重复请求实现缓存失效策略3. 异步通信使用异步方式处理通信避免阻塞主线程优化用户体验通过合理使用通信机制,可以实现微前端应用间的高效协作和数据共享。