主应用

1、初始化 action

创建 src -> shared -> actions.js

// src/shared/actions.js
import { initGlobalState, MicroAppStateActions } from 'qiankun'
const initialState = {
  token: ''
}
const actions: MicroAppStateActions = initGlobalState(initialState)
export default actions

2、在 Vue 组件中使用

<template>
  <div>
    <div>这是主应用</div>
    <span>主应用Action + Vuex通信:</span>
    <button @click= "setMicroActionVuexToken">设置token为000000</button>
  </div>
</template>
<script>
import actions from "@/shared/actions"; //导入实例
export default {
  mounted() {
    if (window.__POWERED_BY_QIANKUN__) {
      actions.onGlobalStateChange((state, prevState) => { // 监听全局状态
        //  监听到状态改变之后再将值更新到 `vuex` 中
        const { token } = state;
        this.$store.commit("user/setToken", token);
      }, true);
    }
  },
  methods:{
    setMicroActionVuexToken() {
      actions.setGlobalState({ token: "000000" });
    },
  }
}
</script>

微应用

1、把主应用中的初始化的action映射到微应用中

创建 src -> shared -> actions.js

// src/shared/actions.js
function emptyAction () {
  // 警告：提示当前使用的是空 Action
  console.warn('Current execute action is empty!')
}

class Actions {
  // 默认值为空 Action
  actions = {
    onGlobalStateChange: emptyAction,
    setGlobalState: emptyAction
  };

  /**
   * 设置 actions
   */
  setActions (actions) {
    this.actions = actions
  }

  /**
   * 映射
   */
  onGlobalStateChange (...args) {
    return this.actions.onGlobalStateChange(...args)
  }

  /**
   * 映射
   */
  setGlobalState (...args) {
    return this.actions.setGlobalState(...args)
  }
}

const actions = new Actions()
export default actions

2、在mounted的生命周期里注入actions实例

main.js

import actions from '@/shared/actions'

export async function mount(props) {
  if (props) {
    // 注入 actions 实例
    actions.setActions(props)
  }
  render(props);
}

3、在 Vue 组件中使用

<template>
  <div>
    <div>这是子应用</div>
    <span>子应用Action + Vuex通信:</span>
    <button @click= "setMicroActionVuexToken">设置token为111111</button>
  </div>
</template>
<script>
import actions from "@/shared/actions"; //导入实例
export default {
  mounted() {
    if (window.__POWERED_BY_QIANKUN__) {
      actions.onGlobalStateChange((state, prevState) => { // 监听全局状态
        //  监听到状态改变之后再将值更新到 `vuex` 中
        const { token } = state;
        this.$store.commit("user/setToken", token);
      }, true);
    }
  },
  methods:{
    setMicroActionVuexToken() {
      if (window.__POWERED_BY_QIANKUN__) {
          // 使用了qiankun微前端，则使用actions通信
        actions.setGlobalState({ token: "111111" });
      } else {
          // 子项目单独运行时，则直接使用Vuex通信
        this.$store.commit("user/setToken", "111111");
      }
    },
  }
}
</script>

这样就实现 action + Vuex 的通信方式。

主要还是开篇这句话：
action + Vuex 通信主要是使用官方的 action 进行通信，之后再将值更新到 vuex 中

主要参考文章：
乾坤官网通信API
微前端qiankun Vue应用间通信的思考
 qiankun的简单使用和通信