qinakun实现全局状态管理

目录

qinakun实现全局状态管理

  • qiankun提供了一个全局的 initGlobalState 来共享数据,基座初始化之后,子应用可以监听到这个数据的变化,也能提交这个数据。

基座 src / index.tsx

js 复制代码
import { start, registerMicroApps, initGlobalState } from 'qiankun'

// root.render(XXX)
// qiankun加载子应用 + 启动 。。。

const state = { count: 1 }
const actions = initGlobalState(state);
// 主项目项目监听和修改
actions.onGlobalStateChange((state, prev) => { // state: 变更后的状态; prev 变更前的状态
  console.log('基座onGlobalStateChange',state, prev);
});
actions.setGlobalState(state);

start() // 3. 启动微服务

子应用 src / index.tsx

  • 在子应用挂载的时候 监听主应用的共享数据
js 复制代码
// 应用每次进入都会调用 mount 方法,通常我们在这里触发应用的渲染方法
export async function mount(props: any) {
  console.log('sub-react', props)
  props.onGlobalStateChange((state, prev) => { // state: 变更后的状态; prev 变更前的状态
    console.log(state, prev);
    // 将这个state存储到我们子应用store
  });
  props.setGlobalState({ count: 2 }); // 修改共享数据
  render(props);
}
相关推荐
你的人类朋友34 分钟前
🫏光速入门cURL
前端·后端·程序员
01传说1 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
Misha韩1 小时前
React Native 一些API详解
react native·react.js
小李飞飞砖1 小时前
React Native 组件间通信方式详解
javascript·react native·react.js
小李飞飞砖1 小时前
React Native 状态管理方案全面对比
javascript·react native·react.js
烛阴2 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化2 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月2 小时前
7月10号总结 (1)
前端·css·css3
天天扭码3 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder3 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法