尝试搭建微前端项目qiankun+vue（二）

本文已参与【新人创作礼】活动，一起开启掘金创作之旅

上一篇文章改造了主应用和微应用，接下来将尝试主应用与微应用之间的通信

查阅官方文档的API, qiankun提供的通信方法为 initGlobalState(state)

• 参数

  • state - Record<string, any> - 必选

• 用法

  定义全局状态，并返回通信方法，建议在主应用使用，微应用通过 props 获取通信方法。

• 返回

  • MicroAppStateActions

    • onGlobalStateChange: (callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) => void， 在当前应用监听全局状态，有变更触发 callback，fireImmediately = true 立即触发 callback

    • setGlobalState: (state: Record<string, any>) => boolean， 按一级属性设置全局状态，微应用中只能修改已存在的一级属性

    • offGlobalStateChange: () => boolean，移除当前应用的状态监听，微应用 umount 时会默认调用

第一步我们在主应用的APP.Vue中加入方法addCoin（）

<el-button @click="addCoin" class="data">添加金币</el-button> 
addCoin(){
         // 初始化 state
        let state = 'change'
        const actions = initGlobalState(state);

        actions.onGlobalStateChange((state, prev) => {
          // state: 变更后的状态; prev 变更前的状态
          console.log(state, prev);
        });
        actions.setGlobalState(state);
        actions.offGlobalStateChange();
    }

接下来在微应用child1中main.js的mount钩子中添加代码

export async function mount(props) {
  console.log('vue app mount', props);
  // 独立运行时，也注册一个名为global的store module
  
   props.onGlobalStateChange((state, prev) => {
    // state: 变更后的状态; prev 变更前的状态
    console.log('mount挂载',state, prev);
  }); 
  // props.setGlobalState(state);
}

现在来看一下效果：在主应用（导航栏设置在主应用中的）点击按钮“添加金币”，会看到控制台可以打印出，微应用中的console 打印出了“change”，到此确定了主应用与微应用的通信方法。但是实际的项目没有这么简单。

数据交互还是需要一些封装才行，这样只是测试一下api提供的initGlobalState(state)是否可以触发数据交互。接下来将封装数据交互的方法，要不然每次都要初始化调用initGlobalState，还不能全局使用变量，多麻烦。